CODEWITHSUNDEEP
javascriptcssgoogle-chrome
Qtax
Qtax

Reputation: 33908

How can you remove an important CSS property?

If an element style property is important (set either trough style="" or JS), how can one remove it?

removeProperty() doesn't work (jsfiddle):

elem.style.setProperty('background', '#faa', 'important');
elem.style.removeProperty('background'); // doesn't work

(Preferably a frameworkless solution, it only has to work in Chrome.)

Upvotes: 10

Views: 13908

Answers (1)

Dagg Nabbit
Dagg Nabbit

Reputation: 76736

The reason you can't remove the property is because it's a shorthand property.

When you set it, other properties actually get added, but no "background" property, so there's no "background" property to remove.

In this case, you can unset it like this:

elem.style.removeProperty('background-color');

In general, you'd need to unset every "long-hand" property represented by the shorthand property.

You could also do this to overwrite it:

elem.style.setProperty('background', 'inherit', 'important');

Or you could nuke the entire inline style for the element like this:

elem.style.cssText = '';

Upvotes: 15

Related Questions