I set CSS properties by setProperty method.

div.style.setProperty("background-color","#DDDDDD", "important");

When needed it should be removed by Javascript. How can I remove or reset back "background-color" in a standard way?

I set CSS properties by setProperty method.

div.style.setProperty("background-color","#DDDDDD", "important");

When needed it should be removed by Javascript. How can I remove or reset back "background-color" in a standard way?

• javascript
• css

• You could either: set the attribute to null, or if it is in a class, you could have a class with the original background-color, and one with a different one, and change the class with the className attribute. – Joe Commented Jan 3, 2014 at 23:49

2 Answers 2

Relevant : How can you remove an important CSS property?

To quote user Dagg Nabbit from the link:

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

If you want to use setProperty:

div.style.setProperty("background-color", "");

I'm not sure that's universally supported on elements, though. I'd normally use:

div.style.backgroundColor = "";