Javascript Absolute Beginner's Guide, 3rd Edition

30

Styling Our Content

In this Chapter

• Learn how to change CSS using JavaScript

• Understand the pros and cons of setting styles directly as opposed to adjusting class values

• Use classList to make fiddling with element class values a breeze

In the previous chapter, we looked at how to modify our DOM’s content using JavaScript. The other part of what makes our HTML elements stand out is their appearance, their styling. When it comes to styling some content, the most common way is by creating a style rule and having its selector target an element or elements. A style rule would look as follows:

.batman {
  width: 100px;
  height: 100px;
  background-color: #333;
}

An element that would be affected by this style rule could look like this:

<div class ...