Can jQuery change css style definition? (not individual css of each element)

by

There is DOM access to stylesheets, but it’s one of those things we tend to avoid because IE needs a load of compatibility cruft.

A better way would be typically be to trigger the change indirectly, using a simple class change on an ancestor:

td { padding: 0.2em 1.2em }
body.changed td { padding: 0.32em 2em }

Now just $('body').addClass('changed') and all the tds update.

If you really must frob the stylesheets:

var sheet= document.styleSheets[0];
var rules="cssRules" in sheet? sheet.cssRules : sheet.rules; // IE compatibility
rules[0].style.padding= '0.32em 2em';

This assumes that the td rule in question is the first rule in the first stylesheet. If not, you might have to go searching for it by iterating the rules looking for the right selectorText. Or just add a new rule to the end, overriding the old one:

if ('insertRule' in sheet)
    sheet.insertRule('td { padding: 0.32em 2em }', rules.length);
else // IE compatibility
    sheet.addRule('td', 'padding: 0.32em 2em', rules.length);

jQuery itself doesn’t give you any special tools to access stylesheets, but it’s possible there are plugins that might.

More Related Contents:

  1. Access CSS file contents via JavaScript
  2. jQuery equivalent of YUI StyleSheet Utility?
  3. Fade animation while scrolling
  4. JS hide function error
  5. Get the longest text in HTML document using Jquery or javascript
  6. jQuery SVG, why can’t I addClass?
  7. JSFiddle code not working in my own page
  8. How to disable scroll without hiding it?
  9. jQuery: Get selected element tag name
  10. Make scrollbar visible in mobile browsers
  11. Bootstrap 4 File Input
  12. jQuery jump or scroll to certain position, div or target on the page from button onclick [duplicate]
  13. Read :hover pseudo class with javascript
  14. Detect fullscreen mode
  15. Count down timer with circular progress bar
  16. infinite-scroll jquery plugin
  17. JavaScript Loading Screen while page loads
  18. Change CSS properties on click
  19. Change text color based on brightness of the covered background area?
  20. simulate background-size:cover on or
  21. jQuery – Sticky header that shrinks when scrolling down
  22. How to use Javascript to check and load CSS if not loaded?
  23. Add CSS rule via jQuery for future created elements
  24. Remove scrollbar but not scrolling functionality [duplicate]
  25. Rotate div text after clicking on button using jquery and css
  26. How do I find which JavaScript is changing an element’s style?
  27. How to use pagination on HTML tables?
  28. how to use html2canvas and jspdf to export to pdf in a proper and simple way
  29. How can I reorder elements with JavaScript?
  30. Can you have multiple lines in an element?

Leave a Comment