How can you remove an important CSS property?

Question

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.)

Solution

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 = '';

Comments

[Qtax]

Interesting tho that removeProperty('background') does work if it was not set with important.

[Qtax]

Great, cssText will be useful in my case. +2 ;-)

[Dagg Nabbit]

It appears that removing shorthand properties will remove all of the corresponding "longhand" properties that weren't set as important. The ones that are set as important (either directly as longhand properties or via a shorthand property) seem to have to be removed explicitly. I haven't found a reference to support this, but I'm guessing it's by design.

[Hashbrown]

border-color was doing this to me and I refused to believe it was a shorthand property (as it was already a component to border). But, sure enough, border-left-color exists and could be removed :|