12

为了简单起见，这个例子只是说明我需要做什么。比如说，我有一个元素，它的样式是在 CSS 中设置的。样式是为元素以及伪类设置的，比如 element:hover。我可以使用以下 JavaScript 覆盖元素的样式：element.style.setProperty('property-name', 'new value', '')。如何通过 JavaScript 更改伪类的样式？

谢谢你。

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

4 回答 4

8

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

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

当然，这只对您希望为颜色设置的一个或几个不同的值有意义。

于 2011-06-19T21:27:11.700 回答
6

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

某些动态伪类:hover可能具有类似的 JavaScript 事件 ( onmouseover onmouseout)，您可以使用它们来更改样式，但这并不意味着两者之间存在实际关联。

于 2011-06-19T21:17:00.410 回答
4

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

于 2011-06-19T21:38:08.887 回答
2

您可以修改 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;');
于 2011-06-20T04:41:12.347 回答