Override Element.Style Using CSS

Override element.style using CSS

Although it's often frowned upon, you can technically use:

display: inline !important;

It generally isn't good practice but in some cases might be necessary. What you should do is edit your code so that you aren't applying a style to the <li> elements in the first place.

How can I override inline styles with external CSS?

The only way to override inline style is by using !important keyword beside the CSS rule. The following is an example of it.

div {
        color: blue !important;
       /* Adding !important will give this rule more precedence over inline style */
    }

<div style="font-size: 18px; color: red;">
    Hello, World. How can I change this to blue?
</div>

How to override CSS style assigned to element

If you use JS to set element style (i.e. ele.style.zIndex), then '100 !important' is not a legal value (while '100' is), so the expression silently fails.

However, if you use ele.setAttribute('style', '.....'), then !important could be applied.

And, inline style has much higher previledge than css class, so you cannot override it.

---

A much better approach would be, if you could edit HTML, use different class definitions.

<style>
    .undercover { z-index: -20; }
    .cover { z-index: 100; }
</style>
<div class="AJaXBusy undercover">

Then change class name when you want to make it

var ajaxBusy = document.querySelector('.AJaXBusy')
ajaxBusy.classList.remove('undercover')
ajaxBusy.classList.add('cover')

---

Related Topics