JavaScript -Change CSS color for 5 seconds

I am trying to make a way of briefly highlighting the text on named links - but only for a few seconds.

<a href="#faq1"onClick="document.getElementById('faq1').style.color='#f00'">
开发者_StackOverflow

So on a list of FAQs - it jumps to the proper ID, changes the color to red for a few seconds as a visual cue to the end user (the answer is here). but then returning to normal color and the interval is complete.

How do I make the above function to work for only a set period of time?

---

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 work for any object you pass to it :-)

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

---

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>

---

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

---

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>

---

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')">

---

This class and function will give a subtle flash to any element, drawing attention to it for a default of 3 sec when the function is called. (If you call the function for more than 3 sec it only flashes for 3 sec and is just slightly brighter after that)
You may wish to remove the border to make it more subtle.
Increase the alpha (a) in the border and 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()">