How to reset the style properties to their CSS defaults in javascript?

Question

On a php generated page there are several elements like this:

<td class="defaultTDStyle" style="color:userDefinedCustomColor" id="myTDId"></td>

So there is a default style and I apply several extra styles that override the style defined in the CSS.

Is there a way to remove these added styles from javascript? It seems the obj.style.color="default" and obj.style.color="auto" don't work. How can I reset the color to the CSS default from javascript?

Transliterate

Answer 1

If recollection serves, obj.style.color="" should work... I don't know if it's right though.

So

I think that only resets styles set via JavaScript. But in this case, the original style is inline. – Cornall

It works, and it is right, although since the style is added in markup, you might want to do obj.removeAttribute('style') as well for good measure. – Fenestration

@Cornall well it sure does work in Firefox, regardless of where the on-element style was set. – Mistake

You're right, I just tested it and it works. It seems inline styles make their way into obj.style so you can reset them by emptying the string, but not those declared in a stylesheet. – Cornall

Thx for the quick answer. It works on Firefox. I hope it works on the other browsers too. I have only Ubuntu now and there is Firefox only. – Transliterate

@Transliterate - again, I don't know if this is right - maybe it violates some standard or something. I highly recommend you check it in other browsers. – So

@Fenestration - I think removing the whole style attribute could be drastic. What if there are other properties they don't want to reset/remove? – So

I understand "restore default style" to mean the style of the element sans any inline attributes. If you are talking about individual style rules, then no you would not want to remove the whole style attribute. – Fenestration

Works in Opera and Chrome too. – Transliterate

Answer 2

Set the style property values to the empty string:

 obj.style.color = "";

Mistake

Setting to null works in ff and chrome but not in IE. In IE (and this works in FF and chrome) you should do obj.style.color=""; – Aitken

Answer 3

The new way:

el.attributeStyleMap.delete('color')

or clear everything:

el.attributeStyleMap.clear()

Not all browsers support this yet though. See StylePropertyMap on MDN for more details and browser compatibility. Since Firefox currently does not support it, you should not use this in production.

See also CSS Typed Object Model and Working with the new CSS Typed Object Model.

Weaner

Not working in Firefox: caniuse.com/mdn-api_htmlelement_attributestylemap – Zygophyllaceous

Answer 4

You could save the attribute style before overriding it, and then apply it again. Like this:

// Get element styling
const element = document.getElementById('someId');
const style = element.getAttribute('style');
const classList = element.classList;
/** Code for overriding element styling goes here **/ 
// Retrieve original styling
const newClassList = element.classList;
for (let item of newClassList) 
    element.classList.remove(item);
for (let item of classList)
    element.classList.add(item);
element.setAttribute('style', style);

Carr

Answer 5

If you previously set the style via JS, you can do:

element.style.color = null;

This resets the style declaration. More info here:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

Perceval