How to Override the `!important` Style in JavaScript?

Overriding the !important Style

This style declaration from an external style sheet:

<code class="css">td.EvenRow a {
  display: none !important;
}</code>

prevents JavaScript from using element.style.display = "inline" or element.style.display = "inline !important" to set the element back to visible.

Solution:

To override the !important style using JavaScript, there are a few options:

1. Set the 'style' Attribute:

<code class="js">element.setAttribute('style', 'display:inline !important');</code>

2. Modify the Style Object's cssText Property:

<code class="js">element.style.cssText = 'display:inline !important';</code>

3. Use the setProperty Method:

<code class="js">element.style.setProperty('display', 'inline', 'important');</code>

Any of these will successfully override the !important style.

The above is the detailed content of How to Override the `!important` Style in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!