Changing Styles

Using the style property

Lesson 54

+25 XP

Step 1 of 5

Changing Styles with JavaScript

The style property allows you to change CSS styles directly with JavaScript. This lets you create dynamic, interactive designs!

// HTML:
<div id="box">Hello!</div>

// JavaScript:
let box = document.getElementById("box");

// Change the background color
box.style.backgroundColor = "blue";

// Change the text color
box.style.color = "white";

// Change the font size
box.style.fontSize = "24px";

Note: CSS properties with dashes (like background-color) become camelCase in JavaScript (backgroundColor)!

Try It:

I'm a styled box!