Skip to main content Accessibility Feedback

Two ways to set an element’s CSS with vanilla JavaScript

Yesterday, we looked at how to get an element’s CSS attributes with vanilla JavaScript. One thing I neglected to mention: getComputedStyle() can only be used to get values, not set them.

Today, let’s look at how to set CSS with vanilla JS.

Approach 1: Inline Styles #

The easiest way to set an element’s style with JavaScript is using the style property.

JavaScript uses camel case instead of a dash for property names (you can view a full list of properties on MDN), but it’s pretty straightforward otherwise:

var elem = document.querySelector('#some-element');

// Set color to purple
elem.style.color = 'purple';

// Set the background color to a light gray
elem.style.backgroundColor = '#e5e5e5';

// Set the height to 150px
elem.style.height = '150px';

The style property adds styles inline on the element.

<div id="some-element" style="color: purple; background-color: #e5e5e5; height: 150px;">
    Hello, world!
</div>

This can make your markup pretty messy, though. It’s also less performant for browsers to render.

Approach 2: Adding Global Styles #

An alternate approach is to inject a <style> element with your CSS properties into the DOM. This is useful when setting styles that should apply to a set of elements instead of just a single one.

First, we’ll create a style element.

var style = document.createElement('style');

Next, we’ll add our styles by giving the style an innerHTML.

var style = document.createElement('style');
style.innerHTML =
    '.some-element {' +
        'color: purple;' +
        'background-color: #e5e5e5;' +
        'height: 150px;' +
    '}';

Finally, we’ll inject the styles into the DOM. To do this, we’ll grab the first script tag we find in the DOM and use insertBefore() to add our style tag before it.

// Create our stylesheet
var style = document.createElement('style');
style.innerHTML =
    '.some-element {' +
        'color: purple;' +
        'background-color: #e5e5e5;' +
        'height: 150px;' +
    '}';

// Get the first script tag
var ref = document.querySelector('script');

// Insert our new styles before the first script tag
ref.parentNode.insertBefore(style, ref);

So, which approach should you use? #

I use a mix of both.

Inline styles are useful when you need to set item-specific styles.

For example, I have a script that normalizes the height of elements that are next to each other. I use style to set the height directly to each element.

If a style applies to a class of elements, though? I’ll inject a style tag for better performance and reusability.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips