Question

我试图简单地突出显示指定链接上的文字 - 但只有几秒钟。

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

因此，在常见问题解答列表中 - 它跳转到正确的ID，将颜色更改为红色几秒钟，作为最终用户的视觉提示（答案在这里）。但随后恢复正常颜色并且间隔完成。

如何使上述功能仅在一段时间内起作用？

Answer 1

试试这个：

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

并在html中：

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

此函数适用于传递给它的任何对象： - ）

这是一个工作小提琴：http://jsfiddle.net/maniator/dG2ks/

Answer 2

您可以使用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>

Answer 3

编写一个函数来将其更改回来（通过将相同的属性设置为空字符串）。使用setTimeout

运行它

Answer 4

试试这个：

<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>

Answer 5

一些JS：

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

一些HTML：

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

Answer 6

$('#faq1').css('color', '#f00');
setTimeout(function() {$('#faq1').css('color', '#000'); }, 5000);

JavaScript - 改变CSS颜色5秒

6 个答案: