Remove CSS Property by Javascript

Question

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?

Answer 1

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

Answer 2

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