Changing An Elements CSS

Open the project folder

Reading styles

We have covered how to change an elements content such as the inner text, and how to add, modify, and remove attributes. Something else we can do is to also modify the elements style.

The starter file is the same example we used previously, and it gets the styles from the style section in the head. In the console, we can still access our element with el..

Inside the console, we can access a style property on this element:

el.style

But what now? We already have a CSS class of green applied in our script:

el.setAttribute(‘class’, ‘green’)

And we can try this in the console:

el.style.color
''

We get no colour returned, instead we see an empty string. This is because it only returns styles which we add inline like this:

<span class="change-title blue red" style="color: red">Meaty</span>

Computed styles

It will only read inline styles and ignore other sources, such as the styles in the head or an external stylesheet. If you did want to know the actual value from anywhere, there is a method available on the global window object for this called getComputedStyle:

window.getComputedStyle(el).color
'rgb(40, 141, 40)'

Setting styles

We can also use the style property to set styles. Let’s convert some of the styles we have in the head into JavaScript:

const el = document.querySelector('.change-title');
el.innerHTML = '<em>No Meat</em>';
// 1. comment out green class
// el.setAttribute('class', 'green');

// 2. add green text color:
el.style.color = 'rgb(40, 141, 40)';

The green colour will still apply but this time using JavaScript. And now onto the header section, first comment out the CSS for this section so we know it is not affecting the outcome:

/* header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
} */

Then we can replace this section with JavaScript. We again use the style property, then set the CSS property. Notice the use of camel-casing. This means the first word is lower case, then each word which follows begins with a capital letter. For example, justify-content becomes justifyContent:

const header = document.querySelector('header');
header.style.display = 'flex';
header.style.justifyContent = 'space-between';
header.style.alignItems = 'center';
header.style.padding = ' 0 10px';

This way of setting CSS has lots of use cases, it can be used for games to show and hide content, and to change colors if you win or lose. We can add a CSS animation if the user clicks on something, we could toggle different color schemes, or different themes to name just a few examples.

Also, it is worth knowing that adding styles like this carries the same priority in the cascade as an inline style does. So, this technique will override external stylesheets and head section styles if it includes the same property.

If you’re wondering how to add multiple CSS properties at once, we can also do this with an object, and we will look at this in more detail in the objects section.

But for now, this is how we can retrieve and set CSS styling using JavaScript.

We set CSS properties just like in a regular stylesheet, but remember when a property is multiple words, such as background-color and justify-content, we need to use camel case equivilents (backgroundColor & justifyContent).