Javascript

How to Change CSS with Javascript

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:

javascript Copy
// 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':

javascript Copy
// 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:

javascript Copy
// 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:

javascript Copy
getElement.style.letterSpacing = 'red';

Similarly, background-image looks like this:

javascript Copy
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:

css Copy
:root { --my-background-color: red; --my-text-color: white; }
javascript Copy
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:

javascript Copy
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.

javascript Copy
// 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:

javascript Copy
// 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 Monday, 5 July 2021
Click to Subscribe Subscribed

Subscribe

Subscribe to stay up to date with our latest posts via email. You can opt out at any time.

Not a valid email