How to use JavaScript to change CSS properties

In this article we will learn how to use JavaScript to change CSS properties, in an easy to learn and fast way, for you to style elements with JS.

How to use JavaScript to change CSS cover

What’s up programmer, ok? Let’s learn how to add CSS with JS!

The idea behind this technique is very simple, first we need to select the target element

Whether by class, id or query selector, for this you can use the methods:

getElementById
getElementsByClassName
querySelector or querySelectorAll

Once this is done, you need to access the style property of the selected element, and make changes to the CSS

Remembering that rules like background-color that have two words, you should replace it with camelCase like this: backgroundColor

Let’s take a practical example:

<p id="paragraph">This paragraph will have its CSS changed!</p>

And this is what appears in the browser:

Well, here we have a p tag, with a paragraph id, now let’s select this element and change its style with JavaScript

let el = document.getElementById('paragraph');

el.style.color = 'red';

el.style.cssText =
 'color: blue;' +
 'background-color: yellow;' +
 'border: 1px solid magenta';

Here we have two ways to change CSS, a single property and a multi-property one.

The first option is to put each property on a line, which can be quite expensive if we want to style the component a lot

In the second form, we concatenate a string over several lines, which gives an impression of CSS and is organized, to reach several properties at once

It’s up to your choice and need

And of course, when a line of code changes a property that already had a value before, the previous one is replaced (which is the case with color )

Here’s how it looks in the browser: