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';
});
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);
More Tips and Tricks for Javascript
- Types may be coming to Javascript
- Generating a Sitemap with Node.JS and Javascript Automatically
- Javascript Records and Tuples
- Deleting an Item in an Array at a Specific Index
- Instagram Style Video Preload Static Effect
- How to get the Full URL in Express on Node.js
- A Guide to Heaps, Stacks, References and Values in Javascript
- An Introduction to Javascript Objects
- Detecting Device Orientation with Javascript
- The Free Course for Javascript