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 your 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 stuff, the most common way is by creating a style rule and have 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="batman"></div>
On any given web page, you’ll see anything from just a few to many MANY style rules each beautifully stepping over each other to style everything that you see. This isn’t the only approach you can use to style content using CSS, though. It wouldn’t be HTML if there weren’t multiple ways to accomplish the same task!
Ignoring inline styles, the other approach that you can use to introduce elements to the goodness that is CSS that revolves around the DOM and JavaScript. Basically, you can use JavaScript to directly style an element, and you can also use JavaScript to add or remove class values on elements which will alter which style rules get applied. In this chapter, you’re going to learn about both of these approaches.
Onwards!
Before we go further, it is probably useful to explain why you would ever want to use JavaScript to affect the style of an element in the first place. In the common cases where you use style rules or inline styles to affect how an element looks, the styling kicks in when the page is loaded. That’s awesome, and that’s probably what you want most of the time.
There are many cases, especially as your content gets more interactive, where you want styles to dynamically kick in based on user input, some code having run in the background, and more. In these sorts of scenarios, the CSS model involving style rules or inline styles won’t help you. While pseudoselectors like hover provide some support, you are still greatly limited in what you can do.
The solution you will need to employ for all of them is one that involves JavaScript. JavaScript not only lets you style the element you are interacting with, but more importantly, it allows you to style elements all over the page. This freedom is very powerful and goes well beyond CSS’s limited ability to style content inside (or very close to) itself.
Like I mentioned in the introduction, you have two ways to alter the style of an element using JavaScript. One way is by setting a CSS property directly on the element. The other way is by adding or removing class values from an element which may result in certain style rules getting applied or ignored. Let’s look at both of these cases in greater detail.
Every HTML element that you access via JavaScript has a style
object. This object allows you to specify a CSS property and set its value. For example, this is what setting the background color of an HTML element whose id
value is superman looks like:
var myElement = document.querySelector("#superman");
myElement.style.backgroundColor = "#D93600";
To affect many elements, you can do something as follows:
var myElements = document.querySelectorAll(".bar");
for (var i = 0; i < myElements.length; i++) {
myElements[i].style.opacity = 0;
}
In a nutshell, to style elements directly using JavaScript, the first step is to access the element. I am using the querySelector
function to make that happen. The second step is just to find the CSS property you care about and give it a value. Remember, many values in CSS are actually strings. Also remember that many values require a unit of measurement like px or em or something like that to actually get recognized.
A common way to style elements is by adding and removing class values on their class
attribute. Let’s say we have the following div
element:
<div id="myDiv" class="bar foo zorb"> ... </div>
From looking at the markup, we can see that this element has a class
attribute with the bar, foo, and zorb values set. What we are going to do in this section is see how easy it is to manipulate these class values using the classList
API. This API is great because it is simple and provides the following methods to manipulate class values:
• add
• remove
• toggle
• contains
What these four methods do may be pretty self-explanatory from their names, but let’s look at them in further detail anyway. Gotta get the page count up somehow, right?
To add a class value to an element, call the add
method on classList
:
After this code runs, our div
element will have the following class values: bar, foo, zorb, baz. The classList
API takes care of ensuring that spaces are added between class values and all the other sort of stuff that CSS expects from your HTML content.
If you specify an invalid class value, the classList
API will throw an exception and not add it. If you tell the add
method to add a class that already exists on the element, your code will run without exception (ha!) but the duplicate class value will not get added.
To remove a class value, just call the remove
method on classList
:
After this code executes, the foo class value will be removed. What you will be left with is just bar and zorb. Pretty simple, right?
For many styling scenarios, there is one very common workflow. First, you check if a class value on an element exists. If the value exists, you remove it from the element. If the value does not exist, you add that class value to the element. To simplify this very common toggling pattern, the classList
API provides you with the toggle
method:
The toggle
method, as its name implies, adds or removes the specified class value on the element each time it is called. In our case, the foo class is removed the first time the toggle method is called. The second time, the foo class is added. The third time, the foo class is removed. You get the picture.
The last thing we are going to look at is the contains
method:
This method checks to see if the specified class value exists on the element. If the value exists, you get true. If the value doesn’t exist, you get false.
As you can see, the classList
API provides you with almost everything you need to add, remove, or inspect class values on an element very easily. The emphasis being on the word almost. For the few things the API doesn’t provide by default, you can go online and read my full article on everything that you can do with classList
: http://bit.ly/kClassList.
Just a quick reminder for those of you reading these words in the print or e-book edition of this book: If you go to www.quepublishing.com and register this book, you can receive free access to an online Web Edition that not only contains the complete text of this book but also features a short, fun interactive quiz to test your understanding of the chapter you just read.
If you’re reading these words in the Web Edition already and want to try your hand at the quiz, then you’re in luck – all you need to do is scroll down!
3.15.137.75