32

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?

Radllaufer
  • 187
  • 1
  • 2
  • 10
Calmarius
  • 18,570
  • 18
  • 110
  • 157

5 Answers5

48

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

Richard JP Le Guen
  • 28,364
  • 7
  • 89
  • 119
  • 1
    I think that only resets styles set via JavaScript. But in this case, the original style is inline. – casablanca Aug 17 '10 at 19:19
  • 18
    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. – MooGoo Aug 17 '10 at 19:20
  • @casablanca well it sure does work in Firefox, regardless of where the on-element style was set. – Pointy Aug 17 '10 at 19:20
  • 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. – casablanca Aug 17 '10 at 19:32
  • 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. – Calmarius Aug 17 '10 at 19:53
  • @Calmarius - 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_. – Richard JP Le Guen Aug 17 '10 at 19:57
  • 2
    @MooGoo - I think removing the whole style attribute could be drastic. What if there are other properties they don't want to reset/remove? – Richard JP Le Guen Aug 17 '10 at 19:58
  • 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. – MooGoo Aug 17 '10 at 21:57
  • 1
    Works in Opera and Chrome too. – Calmarius Feb 15 '11 at 12:25
12

Set the style property values to the empty string:

 obj.style.color = "";
Pointy
  • 405,095
  • 59
  • 585
  • 614
  • 3
    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=""; – dan gibson Mar 24 '12 at 23:12
7

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.

ThiefMaster
  • 310,957
  • 84
  • 592
  • 636
trusktr
  • 44,284
  • 53
  • 191
  • 263
  • 1
    It should be noted though that the string of propriety must be in its CSS FORM and not its Javascript style Object form. So that would be delete('background-color') instead of delete('backgroundColor'). It's a bit unfortunate because if you keep some list of proprieties formatted for Javascript so you can use .style[prop_string]=v you now have to also carry their CSS equivalent or you won't be able to call attributeStyleMap. – FlorianB Feb 16 '22 at 00:50
  • 2
    Not working in Firefox: https://caniuse.com/mdn-api_htmlelement_attributestylemap – Antoine Mar 31 '23 at 11:44
0

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);
Omar RB
  • 197
  • 1
  • 5
0

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

Andrés Aguilar
  • 1