How to dynamically create CSS class in JavaScript and apply

Question

I need to create a CSS stylesheet class dynamically in JavaScript and assign it to some HTML elements like - div  table  span  tr  etc and to some controls like asp Textbox  Dropdownlist and datalist   Is it possible   It would be nice with a sample

User · Answer

Short answer  this is compatible  on all browsers   specifically  IE8 7    function createClass name rules       var style   document createElement  style        style type    text css       document getElementsByTagName  head   0  appendChild style       if   style sheet      insertRule            style styleSheet    style sheet  addRule name  rules       else         style sheet insertRule name     rules     0     createClass   whatever   background-color  green       And this final bit applies the class to an element   function applyClass name element doRemove       if typeof element valueOf       string            element   document getElementById element             if  element  return      if doRemove           element className   element className replace new RegExp    b    name      b   g          else                element className   element className         name            Here s a little test page as well  https   gist github com shadybones 9816763  The key little bit is the fact that style elements have a  styleSheet   sheet  property which you can use to to add remove rules on

User · Answer

As of IE 9  You can now load a text file and set a style innerHTML property  So essentially you can now load a css file through ajax  and get the callback  and then just set the text inside of a style tag like this   This works in other browsers  not sure how far back  But as long as you don t need to support IE8 then it would work      RESULT  doesn t work in IE8 and below  Works in IE9 and other browsers    document  ready function            we want to load the css as a text file and append it with a style        ajax           url  myCss css           success  function result                var s   document createElement  style                s setAttribute  type    text css                s innerHTML   result              document getElementsByTagName  head   0  appendChild s                      fail  function                 alert  fail                           and then you can have it pull an external file like the myCss css   myClass   background  F00

User · Answer

I was looking through some of the answers here  and I couldn t find anything that automatically adds a new stylesheet if there are none  and if not simply modifies an existing one that already contains the style needed  so I made a new function  should work accross all browsers  though not tested  uses addRule and besides that only basic native JavaScript  let me know if it works    function myCSS data        var head   document head    document getElementsByTagName  head   0       if head            if data  amp  amp  data constructor    Object                for var k in data                    var selector   k                  var rules   data k                    var allSheets   document styleSheets                  var cur   null                   var indexOfPossibleRule   null                      indexOfSheet   null                  for var i   0  i  lt  allSheets length  i                          indexOfPossibleRule   findIndexOfObjPropInArray  selectorText  selector allSheets i  cssRules                       if indexOfPossibleRule    null                            indexOfSheet   i                          break                                                           var ruleToEdit   null                  if indexOfSheet    null                         ruleToEdit   allSheets indexOfSheet  cssRules indexOfPossibleRule                      else                       cur   document createElement  style                        cur type     text css                       head appendChild cur                       cur sheet addRule selector                          ruleToEdit   cur sheet cssRules 0                       console log  NOPE  but here s a new one    cur                                     applyCustomCSSruleListToExistingCSSruleList rules  ruleToEdit   err    gt                        if err                            console log err                         else                           console log  successfully added    rules    to    ruleToEdit                                                                     else               console log  provide one paramter as an object containing the cssStyles  like      myID    position   absolute        myClass    background   red      etc                       else           console log  run this after the page loads                  then just add these 2 helper functions either inside the above function  or anywhere else   function applyCustomCSSruleListToExistingCSSruleList customRuleList  existingRuleList  cb        var err   null      console log  trying to apply    customRuleList    to    existingRuleList       if customRuleList  amp  amp  customRuleList constructor    Object  amp  amp  existingRuleList  amp  amp  existingRuleList constructor    CSSStyleRule            for var k in customRuleList                existingRuleList  style   k    customRuleList k                    else           err     provide first argument as an object containing the selectors for the keys  and the second argument is the CSSRuleList to modify              if cb            cb err            function findIndexOfObjPropInArray objPropKey  objPropValue  arr        var index   null      for var i   0  i  lt  arr length  i              if arr i  objPropKey     objPropValue                index   i              break                      return index       notice that in both of them I use a for loop instead of  filter  since the CSS style   rule list classes only have a length property  and no  filter method    Then to call it   myCSS         coby             position  absolute           color  blue               myError             padding  4px           background  salmon             Let me know if it works for your browser or gives an error

User · Answer

Using google closure   you can just use the ccsom module   goog require  goog cssom    var css node   goog cssom addCssText   cssClass   color   F00         The javascript code attempts to be cross browser when putting the css node into the document head

User · Answer

Here is my modular solution    var final style   document createElement  style    final style type    text css    function addNewStyle selector  style     final style innerHTML    selector          style        n       function submitNewStyle      document getElementsByTagName  head   0  appendChild final style      final style   document createElement  style      final style type    text css       function submitNewStyleWithMedia mediaSelector     final style innerHTML     media     mediaSelector       n    final style innerHTML     n         submitNewStyle         You basically anywhere in your code do  addNewStyle  body    color      color1     where color1 is defined variable    When you want to  post  the current CSS file you simply do submitNewStyle     and then you can still add more CSS later     If you want to add it with  media queries   you have the option  After  addingNewStyles  you simply use submitNewStyleWithMedia  min-width  1280px        It was pretty useful for my use-case  as I was changing CSS of public  not mine  website according to current time  I submit one CSS file before using  active  scripts  and the rest afterwards  makes the site look kinda-like it should before accessing elements through querySelector

User · Answer

Found a better solution  which works across all browsers  Uses document styleSheet to add or replace rules  Accepted answer is short and handy but this works across IE8 and less too     function createCSSSelector  selector  style      if   document styleSheets  return    if  document getElementsByTagName  head   length    0  return     var styleSheet mediaType     if  document styleSheets length  gt  0        for  var i   0  l   document styleSheets length  i  lt  l  i            if  document styleSheets i  disabled           continue        var media   document styleSheets i  media        mediaType   typeof media         if  mediaType      string             if  media            media indexOf  screen       -1               styleSheet   document styleSheets i                           else if  mediaType   object             if  media mediaText            media mediaText indexOf  screen       -1               styleSheet   document styleSheets i                            if  typeof styleSheet      undefined            break               if  typeof styleSheet      undefined         var styleSheetElement   document createElement  style        styleSheetElement type    text css       document getElementsByTagName  head   0  appendChild styleSheetElement        for  i   0  i  lt  document styleSheets length  i            if  document styleSheets i  disabled            continue                styleSheet   document styleSheets i              mediaType   typeof styleSheet media         if  mediaType      string         for  var i   0  l   styleSheet rules length  i  lt  l  i            if styleSheet rules i  selectorText  amp  amp  styleSheet rules i  selectorText toLowerCase    selector toLowerCase              styleSheet rules i  style cssText   style          return                    styleSheet addRule selector style         else if  mediaType      object         var styleSheetLength    styleSheet cssRules    styleSheet cssRules length   0      for  var i   0  i  lt  styleSheetLength  i            if  styleSheet cssRules i  selectorText  amp  amp  styleSheet cssRules i  selectorText toLowerCase      selector toLowerCase              styleSheet cssRules i  style cssText   style          return                    styleSheet insertRule selector         style        styleSheetLength           Function is used as follows     createCSSSelector   mycssclass    display none

User · Answer

Looked through the answers and the most obvious and straight forward is missing  use document write   to write out a chunk of CSS you need   Here is an example  view it on codepen  http   codepen io ssh33 pen zGjWga      lt style gt      import url http   fonts googleapis com css family Open Sans 800       d  body  font  3vw  Open Sans   padding-top  1em        d          text-align  center  background   aaf         margin  auto  color   fff  overflow  hidden          width  12em  height  5em        lt  style gt    lt script gt     function w s  document write s      w   lt style gt  long-shadow   text-shadow         for var i 0  i lt 449  i            if i   0  w       w i  px   i  px  444            w     lt  style gt      lt  script gt     lt div class  d  gt       lt div class  long-shadow  gt Long Shadow lt br gt  Short Code lt  div gt   lt  div gt

User · Answer

https   jsfiddle net xk6Ut 256   One option to dynamically create and update CSS class in JavaScript    Using Style Element to create a CSS section                  Using an ID for the style element so that we can update the CSS class          function writeStyles styleName  cssText        var styleElement   document getElementById styleName       if  styleElement                document getElementsByTagName  head   0  removeChild          styleElement       styleElement   document createElement  style        styleElement type    text css       styleElement id   styleName      styleElement innerHTML   cssText      document getElementsByTagName  head   0  appendChild styleElement                 var cssText     testDIV  height     height    px  important          writeStyles  styles js   cssText

User · Answer

An interesting project which could help you out in your task is JSS      JSS is a better abstraction over CSS  It uses JavaScript as a language   to describe styles in a declarative and maintainable way  It is a high   performance JS to CSS compiler which works at runtime in the browsers and server-side    JSS library allows you to inject in the DOM head section using the  attach   function   Repl online version for evaluation   Further information on JSS   An example      Use plugins  jss use camelCase        Create your style  const style       myButton        color   green            Compile styles  apply plugins  const sheet   jss createStyleSheet style      If you want to render on the client  insert it into DOM  sheet attach

User · Answer

function createCSSClass selector  style  hoverstyle         if   document styleSheets                 return             if  document getElementsByTagName  head   length    0                  return            var stylesheet      var mediaType      if  document styleSheets length  gt  0                 for  i   0  i  lt  document styleSheets length  i                           if  document styleSheets i  disabled                                 continue                            var media   document styleSheets i  media              mediaType   typeof media               if  mediaType     string                                  if  media           media indexOf  screen      -1                                          styleSheet   document styleSheets i                                                else if  mediaType     object                                  if  media mediaText           media mediaText indexOf  screen      -1                                          styleSheet   document styleSheets i                                                if  typeof styleSheet     undefined                                  break                                     if  typeof styleSheet     undefined             var styleSheetElement   document createElement  style            styleSheetElement type    text css           document getElementsByTagName  head   0  appendChild styleSheetElement           for  i   0  i  lt  document styleSheets length  i                  if  document styleSheets i  disabled                    continue                            styleSheet   document styleSheets i                      var media   styleSheet media          mediaType   typeof media             if  mediaType     string             for  i   0  i  lt  styleSheet rules length  i                           if  styleSheet rules i  selectorText toLowerCase      selector toLowerCase                                   styleSheet rules i  style cssText   style                  return                                   styleSheet addRule selector  style             else if  mediaType     object                  for  i   0  i  lt  styleSheet cssRules length  i                           if  styleSheet cssRules i  selectorText toLowerCase      selector toLowerCase                                   styleSheet cssRules i  style cssText   style                  return                                   if  hoverstyle    null                         styleSheet insertRule selector         style        0               styleSheet insertRule selector     hover     hoverstyle        1                     else                        styleSheet insertRule selector         style        0                          createCSSClass   modalPopup   header                                      background-color      lightest                                            height  10                                         color  White                                        line-height  30px                                        text-align  center                                         width  100                                         font-weight  bold     null

User · Answer

For the benefit of searchers  if you are using jQuery  you can do the following   var currentOverride       customoverridestyles     if  currentOverride     currentOverride remove          body   append   lt style id   customoverridestyles   gt body background-color pink   lt  style gt       Obviously you can change the inner css to whatever you want   Appreciate some people prefer pure JavaScript  but it works and has been pretty robust for writing overwriting styles dynamically

User · Answer

YUI has by far the best stylesheet utility I have seen out there  I encourage you to check it out  but here s a taste      style element or locally sourced link element var sheet   YAHOO util StyleSheet YAHOO util Selector query  style  null true     sheet   YAHOO util StyleSheet YAHOO util Dom get  local          OR the id of a style element or locally sourced link element sheet   YAHOO util StyleSheet  local         OR string of css text var css     moduleX  alert   background   fcc  font-weight  bold                    moduleX  warn    background   eec                    hide messages  moduleX  alert                  hide messages  moduleX  warn   display  none       sheet   new YAHOO util StyleSheet css     There are obviously other much simpler ways of changing styles on the fly such as those suggested here  If they make sense for your problem  they might be best  but there are definitely reasons why modifying css is a better solution  The most obvious case is when you need to modify a large number of elements  The other major case is if you need your style changes to involve the cascade  Using the dom to modify an element will always have a higher priority  Its the sledgehammer approach and is equivalent to using the style attribute directly on the html element  That is not always the desired effect

User · Answer

There is a light jQuery plugin which allows to generate CSS declarations  jQuery-injectCSS  In fact  it uses JSS  CSS described by JSON   but it s quite easy to handle in order to generate dynamic css stylesheets     injectCSS         test             height  123

User · Answer

One liner  attach one or many new cascading rule s  to the document  This example attach a cursor pointer to every button  input  select  document body appendChild Object assign document createElement  quot style quot     textContent   quot select  button  input  cursor pointer  quot

User · Answer

Here is Vishwanath s solution slightly rewritten with comments    function setStyle cssRules  aSelector  aStyle       for var i   0  i  lt  cssRules length  i              if cssRules i  selectorText  amp  amp  cssRules i  selectorText toLowerCase      aSelector toLowerCase                  cssRules i  style cssText   aStyle              return true                      return false     function createCSSSelector selector  style        var doc   document      var allSS   doc styleSheets      if  allSS  return       var headElts   doc getElementsByTagName  head        if  headElts length  return       var styleSheet  media  iSS   allSS length     scope is global in a function        1  search for media     screen         while iSS   --iSS          if allSS iSS  disabled  continue     dont take into account the disabled stylesheets            media   allSS iSS  media          if typeof media     object               media   media mediaText          if media          media   all     media indexOf  screen      -1               styleSheet   allSS iSS               iSS   -1       indication that media   screen  was found  if not  then iSS  0              break                          2  if not found  create one        if iSS    -1            var styleSheetElement   doc createElement  style            styleSheetElement type    text css           headElts 0  appendChild styleSheetElement           styleSheet   doc styleSheets allSS length      take the new stylesheet to add the selector and the style                  3  add the selector and style        switch  typeof styleSheet media        case  string           if  setStyle styleSheet rules  selector  style                styleSheet addRule selector  style           break      case  object           if  setStyle styleSheet cssRules  selector  style                styleSheet insertRule selector         style        styleSheet cssRules length           break

User · Answer

Although I m not sure why you want to create CSS classes with JavaScript  here is an option   var style   document createElement  style    style type    text css   style innerHTML     cssClass   color   F00      document getElementsByTagName  head   0  appendChild style    document getElementById  someElementId   className    cssClass

[javascript] How to dynamically create CSS class in JavaScript and apply?

Examples related to javascript

Examples related to css

Examples related to stylesheet