Change the style of an entire CSS class using javascript

by

You can modify style rules, but it’s usually not the best design decision.

To access the style rules defined by style sheets, you access the document.styleSheets collection. Each entry in that collection will have a property either called cssRules or rules depending on the browser. Each of those will be a CSSRule instance. You can change the rule by changing its cssText property.

But again, that’s probably not the best way to solve the problem. But it is the literal answer to your question.

The best way to solve the problem is probably to have another class in your stylesheet that overrides the settings of the previous rule, and then to add that class either to the select elements or to the container of them. So for instance, you could have the rules:

.fool select {
    display: block;
}
.fool.bar select {
    display: none;
}

…and when you want to hide the selects, add the "bar" class to the container that has the "fool" class.

Alternately, apply CSS style information directly to elements.

More Related Contents:

  1. Close ad to continue as free user?
  2. How to add a black shadow on top of a div block with background image?
  3. How to read with JavaScript [closed]
  4. How do you read CSS rule values with JavaScript?
  5. Disabling browser print options (headers, footers, margins) from page?
  6. HTML selected option background-color CSS style
  7. How to dynamically create ‘@-Keyframe’ CSS animations?
  8. Make anchor link go some pixels above where it’s linked to
  9. Where should I put the CSS and Javascript code in an HTML webpage?
  10. Text blinking jQuery
  11. Opening new window in HTML for target=”_blank”
  12. Shrink DIV to text that’s wrapped to its max-width?
  13. jQuery vs document.querySelectorAll
  14. How to ONLY trigger parent click event when a child is clicked
  15. Div Z-Index issue with Flash movie
  16. Change the style of :before and :after pseudo-elements? [duplicate]
  17. Dark mode flickers a white background for a millisecond on reload
  18. collapse and expand tabs jquery / simple accordion
  19. How to trigger CSS “hover state” using Javascript? [duplicate]
  20. Remove scrollbar but not scrolling functionality [duplicate]
  21. Gaussian Blur onHover Using jQuery
  22. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  23. fade effect using javascript no jquery?
  24. Placeholder for contenteditable div
  25. Setting the height of a DIV dynamically
  26. assign color to mouse cursor using CSS
  27. Center an Image vertically and horizontally using CSS
  28. Change background on button click, using CSS only? [duplicate]
  29. Jquery/Javascript Opacity animation with scroll
  30. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?

Leave a Comment