How to Change CSS with Javascript

📣 Sponsor

Since we are able to select HTML elements with Javascript, we can also change its CSS styles directly. We can combine this with other Javascript functions to change a user's experience of the website based on their interactions.

Changing CSS with Javascript

On a basic level, we can access an elements CSS with the style property. Let's take a look at how we would change the color of an element with an ID called my-id:


// First lets select the element and put it in a variable..
let getElement = document.getElementById('my-id');

// Next lets access the style property of the element, and set its 'color' to 'red'
getElement.style.color = 'red';

As you might expect, we can also change the style with events. The below code will set a piece of text to red when you click on a button with id 'css-button':


// First lets select the element and put it in a variable..
let getElement = document.getElementById('my-id');
// Let's get the button as well
let theButton = document.getElementById('css-button');

theButton.addEventListener('click', function(e) {
    getElement.style.color = 'red';
});

This will turn to red, when you click the button

How do styles work in Javascript?

For simple, one word styles, we can change the style using that particular style name. For example, the following works:


// First lets select the element and put it in a variable..
let getElement = document.getElementById('my-id');

getElement.style.color = 'red';
getElement.style.width = '500px';
getElement.style.height = '500px';
getElement.style.padding = '0 0 0 10px';

However, since we can't use dashes when selecting styles in Javascript, we run into an issue with styles like letter-spacing. In these cases, we switch to camel case. For example, we can alter letter-spacing in Javascript using the following code:


getElement.style.letterSpacing = 'red';

Similarly, background-image looks like this:


getElement.style.backgroundImage = 'url(./image.png)';

Setting CSS Variables with Javascript

We can go one level deeper, and set CSS variables with Javascript. We have to use a slightly more complicated Javascript string, but it looks like this:


:root {
    --my-background-color: red;
    --my-text-color: white;
}



document.documentElement.style.setProperty('--my-background-color', 'red');
document.documentElement.style.setProperty('--my-text-color', 'white');

We can also retrieve a variable value using the following code:


document.documentElement.style.getProperty('--my-background-color');

Inserting a style into a stylesheet

Sometimes we want to add CSS but we don't have an element to attach it to. If we want to add some CSS in this case, we have to use the cssRule function. This will add a whole CSS rule at a certain point in your CSS stylesheet file programatically.


// This line gets our first stylesheet file
let style = window.document.styleSheets[0];
// Then we insert our rule. In this case, our rule is p { color: black; }
style.insertRule('p { color: black; }');

The above will add our rule at the end of the document, but we can also insert it after specific rules by setting its index:


// Will insert a rule after our 15th CSS statement block
style.insertRule('p { color: black; }', 15);

// This will insert a rule at the end of our CSS stylesheet, since sheet.cssRules.length is the total
// length of CSS rules in our document.
style.insertRule('p { color: black; }', sheet.cssRules.length);

Last Updated 1625502070500