Gre*_*ear 12 html javascript css pseudo-class
为简单起见,这个例子只是我需要做的一个例子.说,我有一个元素,哪个样式在CSS中设置.为元素以及Pseudo-class设置样式,比如元素:悬停.我可以使用以下JavaScript覆盖元素的样式:element.style.setProperty('property-name','new value','').如何通过JavaScript更改Pseudo-class的样式？
谢谢.
<html>
<head>
<style type='text/css'>
#myBtn {
background-color: red;
}
#myBtn:hover {
background-color: blue;
}
</style>
</head>
<body>
<button id='myBtn'>Colored button</button>
<button onclick="ChangeColor();">Script button</button>
<script type="application/x-javascript">
function ChangeColor() {
var Btn = document.getElementById('myBtn');
Btn.style.setProperty('background-color', 'green', '');
};
</script>
</body>
</html>
我会使用一组不同的规则和一个额外的类
<html>
<head>
<style type='text/css'>
#myBtn {
background-color: red;
}
#myBtn:hover {
background-color: blue;
}
#myBtn.changed {
background-color: green;
}
#myBtn.changed:hover {
background-color: yellow; /* or whatever you want here */
}
</head>
然后
<script type="application/x-javascript">
function ChangeColor() {
var btn = document.getElementById('myBtn');
btn.className = "changed";
};
</script>
当然,这只适用于您想要的颜色中的一个或几个不同的值.
CSS伪类和伪元素不是DOM的一部分,因此您无法使用JavaScript直接修改其样式属性.
某些动态伪类:hover可能具有类似的JavaScript事件(onmouseover onmouseout),可用于更改样式,但这并不意味着两者之间存在实际关联.