当某些JavaScript代码被触发时,我想禁用:hover
规则。
我的css看起来像这样:
.headerfoldout a{
background-color: red;
}
.headerfoldout a:hover{
background-color: blue;
}
当这个JavaScript被触发时,我改变了headerfoldout的颜色,但我希望它保持相同的颜色,即使悬停时也是如此。
我用来设置css的JavaScript如下:
document.getElementById("headerfoldout").setAttribute("style", "background-color: green;");
发布于 2018-07-24 05:59:09
与使用JavaScript应用样式相比,使用CSS并使用Js中的类更安全:
.headerfoldout a {
background-color: red;
}
.headerfoldout a:hover {
background-color: blue;
}
.green.headerfoldout a, .green.headerfoldout a:hover {
background-color: green;
}
而在Js中:
// without checking the classname
document.getElementById("headerfoldout").className += " green";
更安全的方法:
// checking the classname
var element, name, arr;
element = document.getElementById("headerfoldout");
name = "green";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
注:我更喜欢className
而不是classList
,因为it will work in all browsers。
编辑:
正如评论中提到的,classList
可以用来简化代码:
document.getElementById("headerfoldout").classList.add("green");
但要小心,IE9中不支持。
https://stackoverflow.com/questions/51487693
复制相似问题