Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Visit Teachable

Modify styles – JavaScript

Summary

element.style.property = 'value';

Details

To modify the styles on an element using JavaScript, use the style property.

First, make sure you have selected an element in your JS file. In this example, we are selecting a paragraph element.

let paragraph = document.querySelector('p');

Then use the style property along with the CSS property that you want to change.

let paragraph = document.querySelector('p');
paragraph.style.color = 'red';

If the CSS property has a hyphen in the name, use camelCase to write it in JavaScript. For example, to change the background color of an element in CSS, you would use the background-color property. However, in JavaScript it would be written backgroundColor.

let paragraph = document.querySelector('p');
paragraph.style.backgroundColor = 'red';

Demo

Exercises

Recreate the JS code from the Demo section in your JS file. Then try customizing the value for the property.