Modify Element Style

Lesson 4 of 13 in Coddy's JavaScript DOM Methods course.

The next property we will learn is style which is responsible for changing existing styling. You can modify the styling like this:

const element = document.getElementById("elementID");
element.style.color = "green";

After this code, the color of #elementID will be changed to green.

Challenge

Easy

You are given HTML code that contains div with an ID.

Using JavaScript only, change the backgorund color of this div to red:

Retrieve the element using getElementById function.
Modify the background color style of the element using style.backgroundColor property.

Try it yourself

<!DOCTYPE html>
<html>
    <body>
        <div id="box" style="width: 100px; height: 100px;">Content</div>
        <script src="script.js"></script>
    </body>
</html>

All lessons in JavaScript DOM Methods

1Introduction

Introduction Document Object Model

2DOM Methods I

getElementByIdModify Element StylegetElementsByClassName Loop Through and Manipulate getElementsByTagName querySelector

3DOM Methods II

querySelectorAll addEventListener innerHTML createElement and appendChild classList toggle