Javascript 如何突出显示我的文本_Javascript_Html

Javascript 如何突出显示我的文本

javascript html

Javascript 如何突出显示我的文本,javascript,html,Javascript,Html,我有一些文字和一个按钮。一旦用户点击一个按钮，我想文本的背景颜色改变为绿色和回来。但是如果我点击按钮，什么都不会发生以下是JS脚本： <script> function bright(){ kontakt = document.getElementById('kontakt'); kontakt.bgcolor = '#A5DF00'; } function dark(){ kontakt = document.getElementById('kontakt

我有一些文字和一个按钮。一旦用户点击一个按钮，我想文本的背景颜色改变为绿色和回来。但是如果我点击按钮，什么都不会发生

以下是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>


函数bright（）{
kontakt=document.getElementById（'kontakt'）；
kontakt.bgcolor='#A5DF00'；
}
函数暗（）{
kontakt=document.getElementById（'kontakt'）；
kontakt.bgcolor='#000000'；
}
函数highlight（）{
setTimeout（bright（），1000）；
setTimeout（暗（），1000）；
}

我从按钮的onclick属性调用highlight（），如下所示：

onclick='highlight（）'

id为kontakt的文本始终在页面上

有什么线索吗？

可以通过样式属性访问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。您还需要更改计时器，使第一个函数在一秒钟后发生，下一个函数在一秒钟后发生

根据您的代码，当调用

highlight（）

时，它将等待一秒钟，然后尽可能快地将背景从原来的颜色变为绿色，并立即变为黑色。我猜你看不到它呈绿色闪烁，因为这比浏览器渲染或你的眼睛能检测到的速度要快

尝试更改

setTimeout（暗，1000）到设置超时（暗，1500）
JSFIDLE示例基于此SO进行了修改
单击我可以看到我更改颜色并返回
功能突出显示（obj）{
var orig=obj.style.color；
obj.style.color='#f00'；
setTimeout（函数（）{
obj.style.color=orig；
}, 5000);
}
我建议使用jquery解决这个问题。你可以下载它。并通过使用更新html文档中的head部分来使用它
<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>


$（document）.ready（function（）{//这确保在执行任何js之前加载了所有元素
函数高亮显示（）{
$（“#kontakt”）.css（“背景色”，“#A5DF00”）；
setTimeout（函数（）{
$（“#kontakt”）.css（“背景色”，“#000000”）；
}, 1000);
};
//现在，单击您使用的按钮执行highlight（）
$（“#按钮id”）。单击（高亮显示（）；
//按钮不再需要onclick属性
}

有关如何使用jquery的更多信息，您可以访问。他们有很多非常好的教程，专门用于这些任务。
除了您立即调用函数并将其返回值分配给setTimeout
回调（删除（）
以修复此问题外，您还调用了bright（）
和dark（）
同时运行…您希望发生什么？如何在两个函数执行之间添加一些时间？不要同时运行它们？只需将dark（）
的超时更改为2000，例如（或大于1000的任何值）。两个超时之间的差异是文本将显示的时间“突出显示。”删除（），否则会立即调用该函数，并将其返回值用作超时回调。
<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>