How to change a Pseudo-class style through JavaScript?

Question

This example is, for a matter of simplicity, just an illustration of what I need to do. Say, I have an element, which style is set in a CSS. The style is set for the element as well as for a Pseudo-class, say element:hover. I can override the style for the element with the following JavaScript: element.style.setProperty('property-name', 'new value', ''). How can I change the Pseudo-class's style through JavaScript?

Thank you.

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

Asked before: http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript — KooiInc, Jun 19 '11 at 21:40
Look at this: http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript — Pickmeup101, Mar 19 '14 at 09:52
Down-voted for accepting an answer that has nothing to do with the stated question. — John, Nov 30 '22 at 11:58

score 7 · Accepted Answer · answered Jun 19 '11 at 21:27

I would use a different set of rules with an additional class

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

And then

<script type="application/x-javascript">
      function ChangeColor() {
         var btn = document.getElementById('myBtn');
         btn.className = "changed";
      };
</script>

Of course, this makes only sense for one or a couple of different values you want to have for your color.

I was considering the same route, but was hoping that there could be a more direct approach. Thank you for your help. — GreenBear, Jun 19 '11 at 22:18

BoltClock · Answer 2 · 2011-06-19T22:41:06.720

6

CSS pseudo-classes and pseudo-elements are not part of the DOM, and thus you cannot modify their style properties directly using JavaScript.

Certain dynamic pseudo-classes like :hover may have similar JavaScript events (onmouseover onmouseout) that you can use to change styles, but this doesn't mean there's an actual correlation between the two.

edited Jun 19 '11 at 22:41

answered Jun 19 '11 at 21:17

BoltClock

700,868
160
1,392
1,356

1

Well that's not completely true - JavaScript can certainly create a new ` – Pointy Jun 19 '11 at 21:27
Thank you all for the help! I think changing the class is the way to go for my task. Sad that seemingly simple tasks require workarounds. You guys have a good day! – GreenBear Jun 19 '11 at 22:24

score 4 · Answer 3 · answered Jun 19 '11 at 21:38

4

You can't modify them directly but you can insert the CSS to the head portion of the DOM.

answered Jun 19 '11 at 21:38

Emil

8,449
3
27
44

score 2 · Answer 4 · answered Jun 20 '11 at 04:41

You can tinker with existing stylesheets in IE6+ and most of the other browsers.

Editing existing rules is possible, but tricky cross-browser.

This example adds a new rule (selector and declaration) to the last stylesheet in the document.

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;');

Trying to use this I get "The property 'cssRules' does not exist on value of type 'StyleSheet'" and "The property 'insertRule' does not exist on value of type 'StyleSheet'". — HischT, Mar 27 '14 at 08:03

How to change a Pseudo-class style through JavaScript?

4 Answers4