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

Answer 1

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