.style property on that element.
.style, you'll need to specify the property you want to change such as
Note that the property backgroundColor is written in camel case rather than hypenated like it is in CSS (background-color). This means that the first word is always written is lower case and if there is a second word there is no space or hypen and the first letter of the second word is capitalized.
When using the
element.style.property to change styles, the styles you add are applied inline within the
style="" attribute on the HTML element. This means they will have higher specificity than styles written in an external stylesheet and overwrite any existing styles unless they are using
To remove a style from the
null or an empty string.
document.querySelector('h1').style.backgroundColor = "";
This won't remove styles written in your stylesheets, only those present in the
style="" attribute. You can overwrite styles written in your stylesheet by setting the value of the property to a different value like "orange" but you can't remove the orginal style with this method. To remove a style from an element that was applied by a stylesheet, you can remove the class from the element or remove any other attribute that the original CSS rule targets.
You can also remove a class from an element to remove all the styles from that element that are assigned to that class.
Or you may prefer this method simply because it keeps function and presentation more separate.
You can do this with
// remove class
If you are adding a second class to an element to change the styles, make sure that your CSS rule for the second class is written later in the stylesheet than the first class so it will be able to overwrite the original styles.
Thanks for reading.
Published on 31 Aug 2022