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.