[ACCEPTED]-JavaScript -Change CSS color for 5 seconds-css

Accepted answer

Score: 12

try this:

function highlight(obj){
   var orig = obj.style.color;
   obj.style.color = '#f00';
   setTimeout(function(){
        obj.style.color = orig;
   }, 5000);
}

and in the html:

<a href="#faq1" onClick="highlight(document.getElementById('faq1'));">

this function will 2 work for any object you pass to it :-)

here 1 is a working fiddle: http://jsfiddle.net/maniator/dG2ks/

Score: 3

You can use window.setTimeout()

<a href="#faq1" onClick="highlight()">

<script type="text/javascript">
    function highlight() {
        var el = document.getElementById('faq1');
        var original = el.style.color;
        el.style.color='#f00';
        window.setTimeout(function() { el.style.color = original; }, 5000);
    }
</script>

Score: 0

Write a function to change it back (by setting 2 the same property to an empty string). Run 1 it using setTimeout

Score: 0

Try this:

<a id="faqLink" href="#faq1">FAQ Link</a>
<script type="text/javascript">
 document.getElementById('faqLink').onclick = function(e){
    e = e || window.event;
    var srcEl = e.target || e.srcElement;
    var src = document.getElementById("faq1");
    var prevColor = src.style.color;
    src.style.color = '#f00';
    setTimeout(function(){
        src.style.color = prevColor;
    }, 5000); //5 seconds
 }
</script>

Score: 0

Some JS:

<script type='text/javascript'>
     function changeColor(element, color){
        document.getElementById(element).style.color = color
        setTimeout(function(){ changeColor(element, '#000') }, 5000)
     }
</script>

Some HTML:

<a href="#faq1" onClick="changeColor('faq1', '#f00')">

Score: 0

This class and function will give a subtle 9 flash to any element, drawing attention 8 to it for a default of 3 sec when the function 7 is called. (If you call the function for 6 more than 3 sec it only flashes for 3 sec 5 and is just slightly brighter after that)
You 4 may wish to remove the border to make it 3 more subtle.
Increase the alpha (a) in the border and 2 background to make it less subtle.

    const myElement = document.getElementById("myElement");

    function emphasise(element, time = 3) {
       element.classList.add("emphasise");
       setTimeout(function() {
         element.classList.remove("emphasise")
       }, time * 1000);
    }

    function myFunction() {
       myElement.innerText = 'kickable, throwable, punchable';
       emphasise(myElement, 4);
    }

.emphasise {
  border: 2px dotted rgba(255, 122, 122, 0.5) !important; 
  border-radius: 3px;
  filter: brightness(115%);
  animation: highlight 3s;
}
@keyframes highlight {
  0% { background: hsla(50, 50%, 60%, 0.3)}
  11% { background: none }
  22% { background: hsla(50, 50%, 60%, 0.3) }
  33% { background: none }
  44% { background: hsla(50, 50%, 60%, 0.3)}
  56% { background: none }
  67% { background: hsla(50, 50%, 60%, 0.3) }
  78% { background: none }
  89% { background: hsla(50, 50%, 60%, 0.3) }
  100% { background: none }
}
    body{ background: beige }
    button{ padding: 10px,20px }

<p>Hardware: <br>the <span id="myElement">physical</span> components of a computer
    </p>
    <button onclick="myFunction()">
    😂 click me
    </button>

see it in JSFiddle 1 here

Source: stackoverflow.com

[ACCEPTED]-JavaScript -Change CSS color for 5 seconds-css

How to detect which one of the defined font was used in a web page?

Google Maps API v3: InfoWindow not sizing correctly

How do you make something to appear slowly on a page using Javascript?

how can i put an image into select?

Possible to make jqGrid stretch to 100%?

Don't load hidden images

Dynamically change onmouseover or onmouseout to call a different function

How can I show an element that has display: none in a CSS rule?

Sidebar that follows scroll, but scrolls self, if taller than viewport

Enable/Disable Input based on selection (jQuery)