Change CSS class properties with jQuery

Question

Is there a way to change the properties of a CSS class  not the element properties  using jQuery   This is a practical example   I have a div with class red   red  background  red     I want to change class red background property  not elements that have class red background assigned   If I do it with jQuery  css   method       red   css  background   green      it will affect the elements that right now have class red  Up to here everything is fine  But if I make an Ajax call  and insert more divs with red class  those won t have a green background  they will have the initial red background   I could call jQuery  css   method again  But I would like to know if there is a way to change the class itself  Please consider this is just a basic example

User · Answer

You can add a class to the parent of the red div, e.g. green-style

$('.red').parent().addClass('green-style');

then add style to the css

.green-style .red {
     background:green; 
}

so everytime you add red element under green-style, the background will be green

User · Answer

document  0  styleSheets styleSheetIndex  insertRule rule  lineIndex      styleSheetIndex is the index value that corresponds to which order you loaded the file in the  lt head gt   e g  0 is the first file  1 is the next  etc  if there is only one CSS file  use 0     rule is a text string CSS rule  Like this   body   display none        lineIndex is the line number in that file  To get the last line number  use   document  0  styleSheets styleSheetIndex  cssRules length  Just console log that styleSheet object  it s got some interesting properties methods    Because CSS is a  cascade   whatever rule you re trying to insert for that selector you can just append to the bottom of the CSS file and it will overwrite anything that was styled at page load    In some browsers  after manipulating the CSS file  you have to force CSS to  redraw  by calling some pointless method in DOM JS like document offsetHeight  it s abstracted up as a DOM property  not method  so don t use       -- simply adding that after your CSSOM manipulation forces the page to redraw in older browsers      So here s an example    var stylesheet     document  0  styleSheets 0   stylesheet insertRule  body   display none      stylesheet cssRules length

User · Answer

Here s a bit of an improvement on the excellent answer provided by Mathew Wolf  This one appends the main container as a style tag to the head element and appends each new class to that style tag  a little more concise and I find it works well   function changeCss className  classValue        var cssMainContainer       css-modifier-container         if  cssMainContainer length    0            var cssMainContainer       lt style id  css-modifier-container  gt  lt  style gt             cssMainContainer appendTo    head                cssMainContainer append className          classValue      n

User · Answer

Didn t find the answer I wanted  so I solved it myself  modify a container div    lt div class  rotation  gt   lt  -- Set the container div s css -- gt     lt div class  content  id  content-1  gt This div gets scaled on hover lt  div gt   lt  div gt    lt  -- Since there is no parent here the transform doesnt have specificity  -- gt   lt div class  rotation content  id  content-2  gt This div does not lt  div gt    css you want to persist after executing  target css     content hover       transform  scale 1 5       modify content s containing div with css        rotation   css  transform    rotate     degrees    deg       Codepen example

User · Answer

You can remove classes and add classes dynamically    document  ready function            div   removeClass  left   addClass  right

User · Answer

You can t change CSS properties directly with jQuery  But you can achieve the same effect in at least two ways   Dynamically Load CSS from a File  function updateStyleSheet filename        newstylesheet    style     filename     css        if      dynamic css   length    0               head   append   lt link gt            css      head   children   last             css attr             id   dynamic css             rel    stylesheet             type   text css             href  newstylesheet                   else               dynamic css   attr  href  newstylesheet             The example above is copied from    How To Switch CSS Files On-The-Fly Using jQuery   Dynamically Add a Style Element     head   append   lt style type  text css  gt  lt  style gt     var newStyleElement      head   children   last    newStyleElement html   red background green        The example code is copied from this JSFiddle fiddle originally referenced by Alvaro in their comment

User · Answer

You may want to take a different approach  Instead of changing the css dynamically  predefine your styles in CSS the way you want them  Then use JQuery to add and remove styles from within Javascript   see code from Ajmal

User · Answer

In case you cannot use different stylesheet by dynamically loading it  you can use this function to modify CSS class  Hope it helps you     function changeCss className  classValue           we need invisible container to store additional css definitions     var cssMainContainer       css-modifier-container        if  cssMainContainer length    0            var cssMainContainer       lt div id  css-modifier-container  gt  lt  div gt             cssMainContainer hide            cssMainContainer appendTo    body                   and we need one div for each class     classContainer   cssMainContainer find  div data-class      className              if  classContainer length    0            classContainer       lt div data-class      className      gt  lt  div gt             classContainer appendTo cssMainContainer                 append additional style     classContainer html   lt style gt     className          classValue      lt  style gt         This function will take any class name and replace any previously set values with the new value  Note  you can add multiple values by passing the following into classValue   background  blue  color yellow

[jquery] Change CSS class properties with jQuery

Examples related to jquery

Examples related to css

Examples related to ajax

Examples related to class

Examples related to properties