- Overview
- Transcript
6.4 Manipulating an Element's CSS Classes
Updating the DOM is expensive, and we can limit the number of updates caused by style manipulation by using CSS classes. You'll learn how to do so in this lesson.
1.Introduction2 lessons, 06:25
1.1Introduction01:51
1.2What You Need04:34
2.How the Web Works2 lessons, 16:03
2.1Networks and DNS09:20
2.2HTTP and the Web Server06:43
3.Creating Documents3 lessons, 27:13
3.1Marking Up a Document09:38
3.2Making Our Document Valid06:22
3.3Semantic and Generic Elements11:13
4.Styling Documents3 lessons, 34:07
4.1Adding Style08:17
4.2CSS Selectors16:15
4.3Modifying Layout09:35
5.Scripting Documents3 lessons, 22:36
5.1Variables and Functions09:06
5.2Writing Your Own Functions05:34
5.3Objects07:56
6.The Document Object Model6 lessons, 42:45
6.1DOM Basics08:58
6.2Finding Elements07:40
6.3Working With `NodeLists`04:30
6.4Manipulating an Element's CSS Classes04:29
6.5Listening for Events08:42
6.6Practicing the Concepts08:26
7.HTTP Requests With JavaScript1 lesson, 09:16
7.1The fetch() API09:16
8.Introduction to Server-Side Development5 lessons, 43:24
8.1Introduction to Server-Side Development10:31
8.2Your First Line of PHP Code06:57
8.3Functions and Variables08:00
8.4Parameters and Decisions08:13
8.5Getting Data From the User09:43
9.Getting Started With Databases3 lessons, 31:01
9.1Create a Users Table12:00
9.2Create a Posts Table10:20
9.3Inserting Data08:41
10.Using PHP to Interact With MySQL4 lessons, 51:59
10.1Reading and Displaying Data12:34
10.2Passing and Validating Data11:58
10.3Updating Data14:52
10.4Joining Data (And Deleting Posts)12:35
11.Conclusion1 lesson, 01:47
11.1Conclusion01:47
6.4 Manipulating an Element's CSS Classes
Manipulating the DOM can be an expensive process because any change that we make the browser has to react to. And some of those changes can be very small. There are other changes that would require the entire page to be redrawn and every update that we make. Consumes CPU cycles. And as I've mentioned before, CPU cycles are precious. We want to conserve them as much as possible. So when it comes to working with style. If you find yourself setting multiple CSS properties on the same element. Well, you might want to rethink that because every time you update the DOM,the browser has to react to that update. So let's change our code back to kind of what we had a couple of lessons ago where we have retrieved our message element, and we set the foreground color to blue and the background color to yellow. So we are essentially doing two things here.The browser has to do two things, it has to set the color to blue. It has to set the background color to yellow. Let's throw in a third style. Let's set the text decoration to underline. So that makes three things.So if you find yourself doing this, it's better to use a class. And I'll show you why. So let's go to our HTML. And let's add the class, ugly text. And we need those three properties. So the color is blue. The background color is yellow. And then we have the text decoration, and that is underline. So every element in the DOM has this style property and we've been using that. Now there's another property called a class list, which gives us the ability to manipulate the classes that are applied to an element. So, you can have a class attribute and we could apply ugly text here. But we could also have other classes too. If we wanted to bold all of the text and we had a bold class, we could apply that. If we had a third class. There's no limit to the amount of classes that we have. So in order to work with all of these different classes, we have a class list property that gives us access to those, and we can do several things. The first thing is to add a class. So in this particular case, we want to add the ugly text class and that is going to apply that class to the element,and this is more efficient than setting the individual CSS properties because we've made one change to the DOM, which means that the browser only has to update once. Now if there's an add method, then it kind of goes without saying that there is a remove method and that will remove the class. And then there's a handy method called toggle, which will toggle that class. So if the class isn't applied to that element, it will add it. If it is added, then it will remove it. So, in this particular case it's going to add it, because we call toggle after we have removed it. And the great thing about these methods is that we can add multiple classes if we want to. So let's go back to our HTML. And let's add another class called bold. And this is simply going to set the font-weight to bold. So let's say that we wanted to apply both the ugly text and the bold classes, all we would have to do Is then passing a second class name. Now we haven't seen this before, or yes, we have the, sum function that we wrote, had two parameters to it. Didn't it? Well. All we have to do is separate the individual classes with a comma, and that is going to apply both of those classes. But then later if we decide, you know what? We don't want the bold class. So we can remove that,we can also remove multiple classes. So this gives us the ability to change an almost infinite amount of CSS by adding and removing as many classes that we want from that element.