Question

我有一些文字和一个按钮。用户点击按钮后，我希望文本的背景颜色变为绿色并返回。但是如果我点击按钮就没有任何反应......

这是JS脚本：

<script>
function bright(){
    kontakt = document.getElementById('kontakt');
    kontakt.bgcolor = '#A5DF00';
}
function dark(){
    kontakt = document.getElementById('kontakt');
    kontakt.bgcolor = '#000000';
}
function highlight(){       
    setTimeout(bright() , 1000);
    setTimeout(dark() , 1000);
}
</script>

我从按钮的onclick属性中调用highlight（），如下所示：onclick='highlight()'。

id为kontakt的文字总是在页面上。

有任何线索吗？

Answer 1

可以通过style属性访问css属性：

var kontakt = document.getElementById('kontakt');
function bright(){
    kontakt.style.backgroundColor = '#A5DF00';
}
function dark(){
    kontakt.style.backgroundColor = '#000000';
}

可以以相同的方式访问所有CSS属性。如果属性中有短划线z-index，只需使用驼峰表示法。

例如：kontakt.style.zIndex

你还需要像这样更新你的setTimeout：

function highlight(){       
    setTimeout(bright , 1000);
    setTimeout(dark , 2000);
}

在你的情况下，你正在调用函数并将它们返回的任何内容传递给setTimeout。您还希望更改第一个函数的计时器在一秒钟之后发生，而下一个函数在一秒之后发生。

Answer 2

根据你的代码，当highlight()被调用时，它将等待一秒，然后将背景从任何地方变为绿色，并立即变为黑色，尽可能快。我猜你不会看到它闪烁绿色，因为它比浏览器呈现或你的眼睛能够检测到的更快。

尝试将setTimeout(dark , 1000);更改为setTimeout(dark , 1500);。

Answer 3

根据此SO here修改了jsfiddle示例answer。

<span id='kontakt' onClick="highlight(this);">Click me to see me change color and back</span>

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

Answer 4

我建议使用jquery来解决这个问题。您可以下载here。并通过使用

更新html文档中的head-section来使用它

<head>
other code...
<script src="directory/where/you/installed/jquery"></script>
</head>

现在您可以使用以下函数突出显示id为'kontakt'的文本：

<script>
$(document).ready(function(){     //this ensures that all elements have been loaded before you are executing any js
    function highlight(){
        $("#kontakt").css("background-color", "#A5DF00");
        setTimeout(function(){
            $("#kontakt").css("background-color", "#000000");
        }, 1000);
    };
// now to execute highlight() by clicking on the button you use
    $("#id-of-the-button").click(highlight();
// there is no further need of the onclick attribute for your button
}
</script>

有关如何使用jquery的更多信息，请访问w3schools。他们有很多非常好的教程可以完成这些任务。

如何突出我的文字

4 个答案: