10

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

Qtax
  • 33,241
  • 9
  • 83
  • 121

1 Answers1

15

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 = '';
Dagg Nabbit
  • 75,346
  • 19
  • 113
  • 141
  • 2
    Interesting tho that `removeProperty('background')` does work if it was not set with `important`. – Qtax Mar 15 '12 at 02:52
  • Great, `cssText` will be useful in my case. +2 ;-) – Qtax Mar 15 '12 at 03:12
  • 1
    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. – Dagg Nabbit Mar 15 '12 at 03:14
  • `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 :| – Hashbrown Oct 04 '13 at 04:30