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?
If recollection serves, obj.style.color="" should work... I don't know if it's right though.
obj.removeAttribute('style') as well for good measure.
Set the style property values to the empty string:
obj.style.color = "";
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.
There are two fully cross-browser options:
null (recommended):element.style.width = null;
element.style.width = "";
I would recommend using the first one to avoid accidental bugs where a string is not really empty (" " for example).
P.S. Option #1 might also be implemented using more explanatory approach:
function resetWidth() {
element.style.width = null;
}
A style declaration is reset by setting it to null or an empty string
MDN.
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);
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
