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>

もちろん、これはあなたがあなたの色に持ちたい1つか2つの異なる値に対してのみ意味があります。

于 2011-06-19T21:27:11.700 に答える
6

CSS疑似クラスと疑似要素はDOMの一部ではないため、JavaScriptを使用してそれらのスタイルプロパティを直接変更することはできません。

のような特定の動的疑似クラスには、スタイルを変更するために使用できる:hover同様のJavaScriptイベント（onmouseover onmouseout）がある場合がありますが、これは2つの間に実際の相関関係があることを意味するものではありません。

于 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 に答える