Photo by
Kelli Tungay
You can add styles to DOM elements in 2 ways in JavaScript.
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 h1 tag now using JavaScript.
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";
Now our h1 tag color will be changed to red. You can attach any valid CSS style to the style property.
And if you inspect the element using chrome dev-tools you can see that the style is added directly to the element using the style attribute.
NOTE 🦄🦄
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.
eg: 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");