Question

这个例子简单来说就是我需要做的事情。说，我有一个元素，哪个样式在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>

Answer 1

我会使用一组不同的规则和一个额外的类

<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>

当然，这只适用于你想要的颜色中的一个或几个不同的值。

Answer 2

CSS伪类和伪元素不是DOM的一部分，因此您无法使用JavaScript直接修改其样式属性。

某些动态伪类（如:hover）可能有类似的JavaScript事件（onmouseover onmouseout），可用于更改样式，但这并不意味着两者之间存在实际关联。

Answer 3

您不能直接修改它们，但可以将CSS插入DOM的头部。

Answer 4

您可以修改IE6 +和大多数其他浏览器中的现有样式表。

编辑现有规则是可行的，但棘手的跨浏览器。

此示例将新规则（选择器和声明）添加到文档中的最后一个样式表。

function addCss(sel, css){
    S= document.styleSheets[document.styleSheets.length-1];
    var r= (S.cssRules!= undefined)? S.cssRules: S.rules;
    if(S.insertRule) S.insertRule(sel+'{'+css+'}',r.length);
    else if(S.addRule)S.addRule(sel,css,r.length);
}

 addCss('button:hover','background-color:blue;');

如何通过JavaScript更改伪类风格？

4 个答案: