如何通過JavaScript更改僞類風格？

爲了簡單起見，這個例子只是我需要做的一個例子。說，我有一個元素，哪種樣式在CSS中設置。樣式設置爲元素以及僞類，例如元素：hover。我可以用下面的JavaScript替換元素的樣式： element.style.setProperty（'property-name'，'new value'，''）。如何通過JavaScript更改僞類的風格？如何通過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>

來源

2011-06-19 GreenBear

問過：對我http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript – KooiInc

恥辱。它並沒有彈出。 – GreenBear

看看這個： http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript – Leo

我會使用一套不同的規則有一個附加的類

<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-19 21:27:11

我正在考慮相同的路線，但希望可以有一個更直接的方法。感謝您的幫助。 – GreenBear

CSS僞類和僞元素不是DOM的一部分，因此您不能直接使用JavaScript修改它們的樣式屬性。

某些動態僞類如:hover可能有類似的JavaScript事件（onmouseover onmouseout），您可以使用它來更改樣式，但這並不意味着這兩者之間存在實際關聯。

來源

2011-06-19 21:17:00 BoltClock

那麼這不完全正確 - JavaScript可以創建一個新的'

如何通過JavaScript更改僞類風格？

回答