Photo by Kelli Tungay
Adding as inline styles
Consider this HTML,
<div> <h1 id="header">My Big Header</h1> <p id="paragraph">Hey, Its a small paragraph</p> </div>
Let's add an inline style to the
First, you need to get a reference to the element you want to add the styles. Then you can add inline styles to the
h1 tag using the
style property available on the element.
Let's make our the text of
h1 tag to red color.
// get a referenc to h1 tag const h1 = document.getElementById("header"); // add inline style: color h1.style.color = "red";
h1 tag color will be changed to red. You can attach any valid CSS style to the
And if you inspect the element using chrome dev-tools you can see that the style is added directly to the element using the
If you need to attach a style that contains a
- (dash) like
background-color, you need to omit
- and make it into a camel-case
backgroundColor and then attach it to the style property.
h1.style.backgroundColor = "blue";
Adding as CSS class attributes
Instead of attaching styles directly to the DOM elements, you can attach class names so that syles can be referenced from an external stylesheet.
To achieve that we need to make a class attribute in our
h1 tag and add the CSS class name to it.
To make an attribute you can use the
setAttribute method available on the
h1 tag element.
The method accepts:
- name of the attribute as the first parameter
- value of the attribute as the second parameter
// get a referenc to h1 tag const h1 = document.getElementById("header"); // add class attribute and add a classname h1.setAttribute("class", "colorRed");