Setting CSS pseudo-class rules from JavaScript

Question

I m looking for a way to change the CSS rules for pseudo-class selectors  such as  link   hover  etc   from JavaScript   So an analogue of the CSS code  a hover   color  red   in JS   I couldn t find the answer anywhere else  if anyone knows that this is something browsers do not support  that would be a helpful result as well

User · Answer

You can t style a pseudo-class on a particular element alone  in the same way that you can t have a pseudo-class in an inline style       attribute  as there is no selector    You can do it by altering the stylesheet  for example by adding the rule    elid hover   background  red      assuming each element you want to affect has a unique ID to allow it to be selected   In theory the document you want is http   www w3 org TR DOM-Level-2-Style Overview html which means you can  given a pre-existing embedded or linked stylesheet  using syntax like   document styleSheets 0  insertRule   elid hover   background-color  red      0   document styleSheets 0  cssRules 0  style backgroundColor   red     IE  of course  requires its own syntax   document styleSheets 0  addRule   elid hover    background-color  red   0   document styleSheets 0  rules 0  style backgroundColor   red     Older and minor browsers are likely not to support either syntax  Dynamic stylesheet-fiddling is rarely done because it s quite annoying to get right  rarely needed  and historically troublesome

User · Answer

If you use REACT   There is something called radium  It is so useful here     Add handlers to props if interactive styles are specified  e g  onMouseEnter for  hover  wrapping existing handlers if necessary  If any of the handlers are triggered  e g  by hovering  Radium calls setState to update a Radium-specific field on the components state object  On re-render  resolve any interactive styles that apply  e g   hover  by looking up the element s key or ref in the Radium-specific state

User · Answer

There is another alternative   Instead of manipulating the pseudo-classes directly  create real classes that model the same things  like a  hover  class or a  visited  class   Style the classes with the usual     syntax and then you can use JavaScript to add or remove classes from an element when the appropriate event fires

User · Answer

One option you could consider is using CSS variables  The idea is that you set the property you want to change to a CSS variable  Then  within your JS  change that variable s value  See example below  x000D   x000D  function changeColor newColor      document documentElement style setProperty  --anchor-hover-color   newColor                   -- select the root    x000D   root     --anchor-hover-color  red     a hover      color  var --anchor-hover-color      x000D   lt a href     gt Hover over me lt  a gt    lt button onclick  changeColor  lime    gt Change to lime lt  button gt   lt button onclick  changeColor  red    gt Change to red lt  button gt  x000D   x000D   x000D

User · Answer

You can t style a pseudo-class on a particular element alone  in the same way that you can t have a pseudo-class in an inline style       attribute  as there is no selector    You can do it by altering the stylesheet  for example by adding the rule    elid hover   background  red      assuming each element you want to affect has a unique ID to allow it to be selected   In theory the document you want is http   www w3 org TR DOM-Level-2-Style Overview html which means you can  given a pre-existing embedded or linked stylesheet  using syntax like   document styleSheets 0  insertRule   elid hover   background-color  red      0   document styleSheets 0  cssRules 0  style backgroundColor   red     IE  of course  requires its own syntax   document styleSheets 0  addRule   elid hover    background-color  red   0   document styleSheets 0  rules 0  style backgroundColor   red     Older and minor browsers are likely not to support either syntax  Dynamic stylesheet-fiddling is rarely done because it s quite annoying to get right  rarely needed  and historically troublesome

User · Answer

A function to cope with the cross-browser stuff   addCssRule   function    string    selector     string    rule      if  document styleSheets        if   document styleSheets length          var head   document getElementsByTagName  head   0         head appendChild bc createEl  style                var i   document styleSheets length-1      var ss   document styleSheets i        var l 0      if  ss cssRules          l   ss cssRules length        else if  ss rules             IE       l   ss rules length             if  ss insertRule          ss insertRule selector          rule        l         else if  ss addRule             IE       ss addRule selector  rule  l

User · Answer

Instead of directly setting pseudo-class rules with javascript  you can set the rules differently in different CSS files  and then use Javascript to switch one stylesheet off and to switch another on  A method is described at A List Apart  qv  for more detail    Set up the CSS files as    lt link rel  stylesheet  href  always on css  gt   lt link rel  stylesheet  title  usual  href  preferred css  gt   lt  -- on by default -- gt   lt link rel  alternate stylesheet  title  strange  href  alternate css  gt   lt  -- off by default -- gt    And then switch between them using javascript   function setActiveStyleSheet title       var i  a  main     for i 0   a   document getElementsByTagName  link   lt i gt    i           if a getAttribute  rel   indexOf  style      -1          amp  amp  a getAttribute  title             a disabled   true         if a getAttribute  title      title  a disabled   false

User · Answer

My trick is using an attribute selector  Attributes are easier to set up by javascript    css   class    normal css         class special  after  content   what you want     javascript    function setSpecial id   document getElementById id  setAttribute  special    1        html   lt element id  x  onclick  setSpecial this id   gt

User · Answer

A function to cope with the cross-browser stuff   addCssRule   function    string    selector     string    rule      if  document styleSheets        if   document styleSheets length          var head   document getElementsByTagName  head   0         head appendChild bc createEl  style                var i   document styleSheets length-1      var ss   document styleSheets i        var l 0      if  ss cssRules          l   ss cssRules length        else if  ss rules             IE       l   ss rules length             if  ss insertRule          ss insertRule selector          rule        l         else if  ss addRule             IE       ss addRule selector  rule  l

User · Answer

Switching stylesheets in and out is the way to do it    Here is a library to build stylesheets dynamically  so you can set styles on the fly   http   www 4pmp com 2009 11 dynamic-css-pseudo-class-styles-with-jquery

User · Answer

There is another alternative   Instead of manipulating the pseudo-classes directly  create real classes that model the same things  like a  hover  class or a  visited  class   Style the classes with the usual     syntax and then you can use JavaScript to add or remove classes from an element when the appropriate event fires

User · Answer

Just place the css in a template string   const cssTemplateString     foo  psuedoSelector  prop  value      Then create a style element and place the string in the style tag and attach it to the document   const styleTag   document createElement  style    styleTag innerHTML   cssTemplateString  document head insertAdjacentElement  beforeend   styleTag     Specificity will take care of the rest  Then you can remove and add style tags dynamically  This is a simple alternative to libraries and messing with the stylesheet array in the DOM  Happy Coding

User · Answer

here is a solution including two functions  addCSSclass adds a new css class to the document  and toggleClass turns it on  The example shows adding a custom scrollbar to a div   x000D   x000D     If newState is provided add remove theClass accordingly  otherwise toggle theClass x000D  function toggleClass elem  theClass  newState    x000D    var matchRegExp   new RegExp         s     theClass         S     g    x000D    var add    arguments length  gt  2   newState    elem className match matchRegExp      null    x000D   x000D    elem className   elem className replace matchRegExp          clear all x000D    if  add  elem className          theClass  x000D    x000D   x000D  function addCSSclass rules    x000D    var style   document createElement  style    x000D    style appendChild document createTextNode          WebKit hack    x000D    document head appendChild style   x000D    var sheet   style sheet  x000D   x000D    rules forEach  rule  index    gt    x000D      try   x000D        if   insertRule  in sheet    x000D          sheet insertRule rule selector         rule rule        index   x000D          else if   addRule  in sheet    x000D          sheet addRule rule selector  rule rule  index   x000D          x000D        catch  e    x000D           firefox can break here           x000D        x000D       x000D       x000D    x000D   x000D  let div   document getElementById  mydiv    x000D  addCSSclass    x000D      selector    narrowScrollbar  -webkit-scrollbar   x000D      rule   width  5px  x000D       x000D      x000D      selector    narrowScrollbar  -webkit-scrollbar-thumb   x000D      rule   background-color  808080 border-radius 100px  x000D      x000D      x000D  toggleClass div   narrowScrollbar   true   x000D   lt div id  mydiv  style  height 300px width 300px border solid overflow-y scroll  gt  x000D    Lorem ipsum dolor sit amet  consectetur adipiscing elit  Sed a eros metus  Nunc dui felis  accumsan nec aliquam quis  fringilla quis tellus  Nulla cursus mauris nibh  at faucibus justo tincidunt eget  Sed sodales eget erat consectetur consectetur  Vivamus x000D    a diam volutpat  ullamcorper justo eu  dignissim ante  Aenean turpis tortor  fringilla quis efficitur eleifend  iaculis id quam  Quisque non turpis in lacus finibus auctor  Morbi ullamcorper felis ut nulla venenatis fringilla  Praesent imperdiet velit x000D    nec sodales sodales  Etiam eget dui sollicitudin  tempus tortor non  porta nibh  Quisque eu efficitur velit  Nulla facilisi  Sed varius a erat ac volutpat  Sed accumsan maximus feugiat  Mauris id malesuada dui  Lorem ipsum dolor sit amet  consectetur x000D    adipiscing elit  Sed a eros metus  Nunc dui felis  accumsan nec aliquam quis  fringilla quis tellus  Nulla cursus mauris nibh  at faucibus justo tincidunt eget  Sed sodales eget erat consectetur consectetur  Vivamus a diam volutpat  ullamcorper justo x000D    eu  dignissim ante  Aenean turpis tortor  fringilla quis efficitur eleifend  iaculis id quam  Quisque non turpis in lacus finibus auctor  Morbi ullamcorper felis ut nulla venenatis fringilla  Praesent imperdiet velit nec sodales sodales  Etiam eget x000D    dui sollicitudin  tempus tortor non  porta nibh  Quisque eu efficitur velit  Nulla facilisi  Sed varius a erat ac volutpat  Sed accumsan maximus feugiat  Mauris id malesuada dui  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Switching stylesheets in and out is the way to do it    Here is a library to build stylesheets dynamically  so you can set styles on the fly   http   www 4pmp com 2009 11 dynamic-css-pseudo-class-styles-with-jquery

User · Answer

My trick is using an attribute selector  Attributes are easier to set up by javascript    css   class    normal css         class special  after  content   what you want     javascript    function setSpecial id   document getElementById id  setAttribute  special    1        html   lt element id  x  onclick  setSpecial this id   gt

User · Answer

As already stated this is not something that browsers support   If you aren t coming up with the styles dynamically  i e  pulling them out of a database or something  you should be able to work around this by adding a class to the body of the page   The css would look something like   a hover   background  red     theme1 a hover   background  blue      And the javascript to change this would be something like      Look up some good add remove className code if you want to do this    This is really simplified  document body className      theme1

User · Answer

As already stated this is not something that browsers support   If you aren t coming up with the styles dynamically  i e  pulling them out of a database or something  you should be able to work around this by adding a class to the body of the page   The css would look something like   a hover   background  red     theme1 a hover   background  blue      And the javascript to change this would be something like      Look up some good add remove className code if you want to do this    This is really simplified  document body className      theme1

User · Answer

I threw together a small library for this since I do think there are valid use cases for manipulating stylesheets in JS  Reasons being    Setting styles that must be calculated or retrieved - for example setting the user s preferred font-size from a cookie  Setting behavioural  not aesthetic  styles  especially for UI widget plugin developers  Tabs  carousels  etc  often require some basic CSS simply to function - shouldn t demand a stylesheet for the core function  Better than inline styles since CSS rules apply to all current and future elements  and don t clutter the HTML when viewing in Firebug   Developer Tools

User · Answer

One option you could consider is using CSS variables  The idea is that you set the property you want to change to a CSS variable  Then  within your JS  change that variable s value  See example below  x000D   x000D  function changeColor newColor      document documentElement style setProperty  --anchor-hover-color   newColor                   -- select the root    x000D   root     --anchor-hover-color  red     a hover      color  var --anchor-hover-color      x000D   lt a href     gt Hover over me lt  a gt    lt button onclick  changeColor  lime    gt Change to lime lt  button gt   lt button onclick  changeColor  red    gt Change to red lt  button gt  x000D   x000D   x000D

User · Answer

here is a solution including two functions  addCSSclass adds a new css class to the document  and toggleClass turns it on  The example shows adding a custom scrollbar to a div   x000D   x000D     If newState is provided add remove theClass accordingly  otherwise toggle theClass x000D  function toggleClass elem  theClass  newState    x000D    var matchRegExp   new RegExp         s     theClass         S     g    x000D    var add    arguments length  gt  2   newState    elem className match matchRegExp      null    x000D   x000D    elem className   elem className replace matchRegExp          clear all x000D    if  add  elem className          theClass  x000D    x000D   x000D  function addCSSclass rules    x000D    var style   document createElement  style    x000D    style appendChild document createTextNode          WebKit hack    x000D    document head appendChild style   x000D    var sheet   style sheet  x000D   x000D    rules forEach  rule  index    gt    x000D      try   x000D        if   insertRule  in sheet    x000D          sheet insertRule rule selector         rule rule        index   x000D          else if   addRule  in sheet    x000D          sheet addRule rule selector  rule rule  index   x000D          x000D        catch  e    x000D           firefox can break here           x000D        x000D       x000D       x000D    x000D   x000D  let div   document getElementById  mydiv    x000D  addCSSclass    x000D      selector    narrowScrollbar  -webkit-scrollbar   x000D      rule   width  5px  x000D       x000D      x000D      selector    narrowScrollbar  -webkit-scrollbar-thumb   x000D      rule   background-color  808080 border-radius 100px  x000D      x000D      x000D  toggleClass div   narrowScrollbar   true   x000D   lt div id  mydiv  style  height 300px width 300px border solid overflow-y scroll  gt  x000D    Lorem ipsum dolor sit amet  consectetur adipiscing elit  Sed a eros metus  Nunc dui felis  accumsan nec aliquam quis  fringilla quis tellus  Nulla cursus mauris nibh  at faucibus justo tincidunt eget  Sed sodales eget erat consectetur consectetur  Vivamus x000D    a diam volutpat  ullamcorper justo eu  dignissim ante  Aenean turpis tortor  fringilla quis efficitur eleifend  iaculis id quam  Quisque non turpis in lacus finibus auctor  Morbi ullamcorper felis ut nulla venenatis fringilla  Praesent imperdiet velit x000D    nec sodales sodales  Etiam eget dui sollicitudin  tempus tortor non  porta nibh  Quisque eu efficitur velit  Nulla facilisi  Sed varius a erat ac volutpat  Sed accumsan maximus feugiat  Mauris id malesuada dui  Lorem ipsum dolor sit amet  consectetur x000D    adipiscing elit  Sed a eros metus  Nunc dui felis  accumsan nec aliquam quis  fringilla quis tellus  Nulla cursus mauris nibh  at faucibus justo tincidunt eget  Sed sodales eget erat consectetur consectetur  Vivamus a diam volutpat  ullamcorper justo x000D    eu  dignissim ante  Aenean turpis tortor  fringilla quis efficitur eleifend  iaculis id quam  Quisque non turpis in lacus finibus auctor  Morbi ullamcorper felis ut nulla venenatis fringilla  Praesent imperdiet velit nec sodales sodales  Etiam eget x000D    dui sollicitudin  tempus tortor non  porta nibh  Quisque eu efficitur velit  Nulla facilisi  Sed varius a erat ac volutpat  Sed accumsan maximus feugiat  Mauris id malesuada dui  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

As already stated this is not something that browsers support   If you aren t coming up with the styles dynamically  i e  pulling them out of a database or something  you should be able to work around this by adding a class to the body of the page   The css would look something like   a hover   background  red     theme1 a hover   background  blue      And the javascript to change this would be something like      Look up some good add remove className code if you want to do this    This is really simplified  document body className      theme1

User · Answer

As already stated this is not something that browsers support   If you aren t coming up with the styles dynamically  i e  pulling them out of a database or something  you should be able to work around this by adding a class to the body of the page   The css would look something like   a hover   background  red     theme1 a hover   background  blue      And the javascript to change this would be something like      Look up some good add remove className code if you want to do this    This is really simplified  document body className      theme1

User · Answer

If you use REACT   There is something called radium  It is so useful here     Add handlers to props if interactive styles are specified  e g  onMouseEnter for  hover  wrapping existing handlers if necessary  If any of the handlers are triggered  e g  by hovering  Radium calls setState to update a Radium-specific field on the components state object  On re-render  resolve any interactive styles that apply  e g   hover  by looking up the element s key or ref in the Radium-specific state

User · Answer

In jquery you can easily set hover pseudo classes      p   hover function      this  css  background-color    yellow       function      this  css  background-color    pink

User · Answer

Just place the css in a template string   const cssTemplateString     foo  psuedoSelector  prop  value      Then create a style element and place the string in the style tag and attach it to the document   const styleTag   document createElement  style    styleTag innerHTML   cssTemplateString  document head insertAdjacentElement  beforeend   styleTag     Specificity will take care of the rest  Then you can remove and add style tags dynamically  This is a simple alternative to libraries and messing with the stylesheet array in the DOM  Happy Coding

User · Answer

In jquery you can easily set hover pseudo classes      p   hover function      this  css  background-color    yellow       function      this  css  background-color    pink

User · Answer

I threw together a small library for this since I do think there are valid use cases for manipulating stylesheets in JS  Reasons being    Setting styles that must be calculated or retrieved - for example setting the user s preferred font-size from a cookie  Setting behavioural  not aesthetic  styles  especially for UI widget plugin developers  Tabs  carousels  etc  often require some basic CSS simply to function - shouldn t demand a stylesheet for the core function  Better than inline styles since CSS rules apply to all current and future elements  and don t clutter the HTML when viewing in Firebug   Developer Tools

User · Answer

Instead of directly setting pseudo-class rules with javascript  you can set the rules differently in different CSS files  and then use Javascript to switch one stylesheet off and to switch another on  A method is described at A List Apart  qv  for more detail    Set up the CSS files as    lt link rel  stylesheet  href  always on css  gt   lt link rel  stylesheet  title  usual  href  preferred css  gt   lt  -- on by default -- gt   lt link rel  alternate stylesheet  title  strange  href  alternate css  gt   lt  -- off by default -- gt    And then switch between them using javascript   function setActiveStyleSheet title       var i  a  main     for i 0   a   document getElementsByTagName  link   lt i gt    i           if a getAttribute  rel   indexOf  style      -1          amp  amp  a getAttribute  title             a disabled   true         if a getAttribute  title      title  a disabled   false

User · Answer

You can t style a pseudo-class on a particular element alone  in the same way that you can t have a pseudo-class in an inline style       attribute  as there is no selector    You can do it by altering the stylesheet  for example by adding the rule    elid hover   background  red      assuming each element you want to affect has a unique ID to allow it to be selected   In theory the document you want is http   www w3 org TR DOM-Level-2-Style Overview html which means you can  given a pre-existing embedded or linked stylesheet  using syntax like   document styleSheets 0  insertRule   elid hover   background-color  red      0   document styleSheets 0  cssRules 0  style backgroundColor   red     IE  of course  requires its own syntax   document styleSheets 0  addRule   elid hover    background-color  red   0   document styleSheets 0  rules 0  style backgroundColor   red     Older and minor browsers are likely not to support either syntax  Dynamic stylesheet-fiddling is rarely done because it s quite annoying to get right  rarely needed  and historically troublesome

User · Answer

You can t style a pseudo-class on a particular element alone  in the same way that you can t have a pseudo-class in an inline style       attribute  as there is no selector    You can do it by altering the stylesheet  for example by adding the rule    elid hover   background  red      assuming each element you want to affect has a unique ID to allow it to be selected   In theory the document you want is http   www w3 org TR DOM-Level-2-Style Overview html which means you can  given a pre-existing embedded or linked stylesheet  using syntax like   document styleSheets 0  insertRule   elid hover   background-color  red      0   document styleSheets 0  cssRules 0  style backgroundColor   red     IE  of course  requires its own syntax   document styleSheets 0  addRule   elid hover    background-color  red   0   document styleSheets 0  rules 0  style backgroundColor   red     Older and minor browsers are likely not to support either syntax  Dynamic stylesheet-fiddling is rarely done because it s quite annoying to get right  rarely needed  and historically troublesome

[javascript] Setting CSS pseudo-class rules from JavaScript

Examples related to javascript

Examples related to css

Examples related to pseudo-class

Examples related to css-in-js