Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Manipulate the DOM with the classList API

    Damon BauerDamon Bauer

    Learn how to add, remove and test for CSS classes using the classList API. It's more powerful than using className and doesn't require any dependencies.

    cssCSS
    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 I've set up a basic page with a few elements, and couple of style sheets. In our JavaScript, let's make a reference to our image by saying let image = document.getElementById("image"). We'll say let apply = document.getElementById("apply").

    00:19 This gives us a reference to our image, and a reference to our apply filter button that we...Let's call our apply button, and say apply.addEventListener, and listen for a click. Inside of that click event listener, we want to say image.classlist.add. I'm going to add a class of moon. You can see when I click the apply filter button, the moon filter was applied.

    00:49 Classlist.add also takes multiple arguments. If I wanted to add multiple classes, I could do that just by separating those by commas.

    00:56 I'll add another class of small here. Now when I click the apply filter button, you'll see the filter was applied, and the image gets a little bit smaller. Let's set up a reference to our reset button by saying let reset = document.getElementById("reset").

    01:15 Just like our apply button, we can add a click event listener on reset by saying reset.addEventListener. Inside of that, we can call image.classlist.remove. That's the exact same signature as add. We can remove moon, and we can remove small.

    01:38 If I click the apply filter button now, I'll see that those classes were added. When I click the reset button, those classes are removed. Instead of having two buttons to apply the filter, and then reset it, we can change classlist.add to classlist.toggle.

    01:53 In this case, I just want to toggle the move class. Now when I click apply filter, that class is added. When I click it again, it's removed. Toggle also takes a second parameter. If that second parameter evaluates to true, such as 1<2, classlist will try to toggle the class that you pass on each time it gets evaluated.

    02:13 Since we know 1<2, when we click apply filter, you'll see the moon class is added. If we click it again, the class is not removed, it's trying to be added again. Really, think of toggle as toggle on or toggle off, based on whether or not this second parameter is true or false.

    02:30 Let's add some code to our HTML that will let us know whether or not the moon filter is applied. We'll be concerned with the element with the ID of check. Let's create a function called updatecheck(). Inside of our function, we can store a reference to our check element by saying document.getElementById("check").

    02:54 Let's change the text of our check element by saying check.innerHTML, and set that equal to image.classlist.contains the class of moon. If that evaluates to true, we want to set the text to yes, otherwise we want to set it to no.

    03:12 Now all that's left to do is call our updatecheck() method, and each time one of our buttons is pressed. You'll see when I click the apply moon filter button, the text changes to yes. If I click reset, it changes back to no.

    Discuss

    Discuss