How Can I Dynamically Modify or Remove CSS Class Definitions in JavaScript?

How to Modify or Remove CSS Class Definitions Dynamically

While adding new CSS class definitions at runtime using JavaScript is feasible, the ability to alter or eliminate existing ones is also crucial.

Changing CSS Class Properties

To modify the font-size rule of the .menu class, allowing it to affect any elements on the page that employ it, you can use the following steps:

1. Retrieve the array of stylesheets using document.styleSheets.
2. For each stylesheet, iterate through the cssRules array.
3. Locate the rule that corresponds to the .menu class using the selectorText property.
4. Use the style.setProperty('font-size','10px',null) method to update the rule's font-size property.

Removing CSS Class Definitions

To remove the .menu class definition, perform the following steps:

1. Repeat steps 1 and 2 from the previous section.
2. Find the rule that corresponds to the .menu class using the selectorText property.
3. Use the deleteRule() method to remove the rule from the stylesheet, e.g. stylesheet.deleteRule(index), where index is the rule's index within the cssRules array.

The above is the detailed content of How Can I Dynamically Modify or Remove CSS Class Definitions in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!