• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 8/5/19

Give your elements some style

Log in or subscribe for free to enjoy all this course has to offer!

JavaScript not only lets you interact with your web page structure, but it also lets you change the style of elements! It's time to learn how.

Example page

Add this content to your usual HTML file or follow along in the CodePen link below.

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../css/course.css">
        <title>Styles with JavaScript</title>
    </head>
    
    <body>
        <p>First</p>
        <p style="color: green;">Second</p>
        <p id="para">Third</p>
        
        <script src="../js/course.js"></script>
    </body>

</html>

Next, create a new folder called css , and in that folder, create a new file called course.css . If you're following along on CodePen, you'll add the code to the CSS portion of the editor.

#para {
    font-style: italic;
    color: blue;
}

The course.css file is what we call a stylesheet, written in a language called CSS. The rules in a stylesheet determine the appearance of elements on a page! Here, the one element we're adjusting via CSS here is the element with the para  ID. Its text will be blue and in italics.

Modify element style

Style property

DOM elements are equipped with a property called style, which returns an object representing the element's styles. This object's properties match up to its CSS properties. By defining this value with JavaScript, you're modifying the element's styles!

The code below selects the page's first paragraph and modifies its text color and margins.

var pElement = document.querySelector("p");
pElement.style.color = "red";
pElement.style.margin = "50px";

Compound CSS properties

Some CSS properties have compound names, meaning they're composed of two words (likebackground-color). To interact with these properties via JavaScript, you have to ditch the hyphen and capitalize the first letter of following words.

This example modifies the same paragraph element's font-family and background-color properties.

// ...
pElement.style.fontFamily = "Arial";
pElement.style.backgroundColor = "black";

This naming convention is called camelCase, and it's seen pretty often in JavaScript! You can see CSS properties and their JavaScript properties here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference 

Access element styles

A great solution for accessing element styles is to use a method called getComputedStyle. This method takes the DOM node as a parameter and returns an object that represents its style. You can then see the different CSS properties of the object.

The following example will show the style properties of the third paragraph:

var paragraphStyle = getComputedStyle(document.getElementById("para"));
console.log(paragraphStyle.fontStyle); // Will be "italic"
console.log(paragraphStyle.color); // Will show the color blue in RGB values

The color blue is represented as 3 color values: red, green, and blue (RGB). For each of these primary colors, values will always be between or equal to 0 and 255.

Summary

Here's what we've covered in terms of working with styles.

  • The style JavaScript property represents the style attribute of a DOM element. It lets you modify the element's style and define values of its CSS properties.

  • CSS properties that involve multiple words are written in camelCase when dealing with JavaScript. For example, font-family becomes fontFamily.

  • The style property in JavaScript isn't enough to access an element's style. You should usegetComputedStyle for this instead.

Example of certificate of achievement
Example of certificate of achievement