如何突出显示我的文字

我有一些文字和一个按钮。一旦用户点击一个按钮，我希望文本的背景将颜色更改为绿色并返回。但没有任何反应，如果我按一下按钮......如何突出显示我的文字

这里的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属性亮点（）这样的：onclick='highlight()'。

ID为kontakt的文本始终在页面上。

任何线索？

来源

2014-03-25 grizeldi

除了您立即调用函数并将其返回值分配给setTimeout回调函数（删除'（）'来解决这个问题）之外，您还调用了'bright（）'和'dark （）'同时......你期望发生什么？ –

如何在执行两个函数之间添加一些时间呢？ – grizeldi

不要同时运行它们吗？ –

根据你的代码，当调用highlight()时，它会等待一秒钟，然后将背景从无论什么时候变成绿色，并立即变为黑色，尽可能快。我猜你没有看到它闪烁绿色，因为它比浏览器渲染或你的眼睛可以检测到更快。

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

来源

2014-03-25 17:35:36 potterbm

删除'（）'，否则立即调用该函数，并将其返回值用作超时回调。 –

哦，很好的电话。我只是复制粘贴了那里的东西。 – potterbm

这一个工程。 – grizeldi

CSS属性是通过style属性来访问：

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。您还想更改第一个函数在一秒之后发生的计时器，并在接下来的一秒钟之后发生。

来源

2014-03-25 17:34:15 Ibu

jsfiddle example here根据此修改SO 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); 
}

来源

2014-03-25 17:39:40

我会推荐使用jquery来解决这个问题。你可以下载它here。并用它在你的HTML文档与

<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。他们有很多非常好的教程来完成这些任务。

来源

2014-03-25 18:01:30

如何突出显示我的文字

回答

相关问题