1 00:00:02,660 --> 00:00:08,420 Now that we know how to select elements both with the query methods, get element by ID but also with 2 00:00:08,420 --> 00:00:14,090 the DOM traversing techniques and that we also learned how to evaluate and manipulate elements, 3 00:00:14,090 --> 00:00:19,650 let's have a look at one specific way of manipulating elements and that is changing their style. 4 00:00:19,660 --> 00:00:24,860 I already showed you how that works with the style property but turns out there are other ways of doing 5 00:00:24,860 --> 00:00:25,850 that as well. 6 00:00:25,850 --> 00:00:32,000 So of course you can use that style property with which we already worked, with that you directly target 7 00:00:32,180 --> 00:00:35,190 the individual CSS styles applied to that element, 8 00:00:35,210 --> 00:00:39,730 it's like using inline styles on the element in your HTML document. 9 00:00:39,800 --> 00:00:46,850 So if you know a bit of CSS, you'll also know that this has the highest specificity, which means styles 10 00:00:46,880 --> 00:00:53,330 assigned on the style property will overwrite any other styles that might be assigned to an element 11 00:00:53,600 --> 00:01:00,030 by a class or anything like that. Now important here as you learned already, the style property names 12 00:01:00,030 --> 00:01:06,060 are based on the CSS property names but they are adjusted, for example background color is written 13 00:01:06,060 --> 00:01:09,920 like this and not as it is in CSS with a dash. 14 00:01:10,070 --> 00:01:15,450 Now that's one way of setting styles but there are other ways and it's kind of obvious if you think 15 00:01:15,450 --> 00:01:16,110 about it, 16 00:01:16,170 --> 00:01:21,540 you of course can also manipulate the CSS classes that are added to an element. 17 00:01:21,540 --> 00:01:28,080 So with the class name property, you can set the CSS classes that exist on an element to dynamically 18 00:01:28,170 --> 00:01:33,990 change these classes, remove them or add new ones and that of course means that you adjust the styles 19 00:01:34,020 --> 00:01:40,580 that are applied by these classes because you control the classes on an element. With class name, you 20 00:01:40,580 --> 00:01:42,980 set and control all classes at once, 21 00:01:42,990 --> 00:01:48,360 class name is a string and it's a string of all the classes that are added, so you can manipulate that 22 00:01:48,360 --> 00:01:51,900 string to manipulate the classes. By the way, you of course 23 00:01:51,930 --> 00:01:58,230 alternatively could also change the ID or some other attributes of an element if you are using 24 00:01:58,230 --> 00:02:04,050 an ID selector or attribute selectors in your CSS code but CSS classes are of course the 25 00:02:04,050 --> 00:02:07,880 most common way of spreading styles across multiple elements. 26 00:02:07,950 --> 00:02:13,050 Now when it comes to CSS classes, you actually also have another way of editing classes on an element. 27 00:02:13,530 --> 00:02:20,190 Class name takes one string, which is simply a string of all the classes that should be added and therefore 28 00:02:20,190 --> 00:02:26,070 if you want to toggle a class there, you have to manage it manually, that you keep classes which you don't 29 00:02:26,070 --> 00:02:31,500 want to remove and only remove the classes that you want to get rid of. To make that a bit easier, 30 00:02:31,500 --> 00:02:34,680 all these element nodes also have another property, 31 00:02:34,680 --> 00:02:41,400 the class list property which is in the end a Javascript object and not just a string like class name 32 00:02:41,430 --> 00:02:48,200 but an object with a couple of built-in methods that make it easy for you to add, remove or toggle CSS 33 00:02:48,200 --> 00:02:54,630 classes, so that it's easier for you to manage individual classes and not having to do this string 34 00:02:54,630 --> 00:02:57,810 micromanagement that you have to do with class name. 35 00:02:57,810 --> 00:03:03,300 It gives you finegrained control over the classes that are added and you can even use it in conjunction 36 00:03:03,300 --> 00:03:08,010 with class name, though you should be careful that you don't overwrite each other and typically you use 37 00:03:08,070 --> 00:03:09,330 either of the two. 38 00:03:09,360 --> 00:03:14,310 So let's now dive into all these options to make it super clear what's happening there. 39 00:03:14,310 --> 00:03:21,480 Back here on our page as I left it, we have the section with the unordered list and let's now say we want 40 00:03:21,480 --> 00:03:30,290 to style this section. Now of course for that, we can simply get access to it with document query selector 41 00:03:30,330 --> 00:03:31,890 section for example, 42 00:03:31,890 --> 00:03:37,240 you could also assign an ID to it and use get element by ID but I'll just use that 43 00:03:37,620 --> 00:03:43,440 and now with the section available, we can of course add some styles, for example with inline styles, with 44 00:03:43,440 --> 00:03:46,970 the style property, we can add a background color but 45 00:03:47,070 --> 00:03:49,010 of course you can add more than just the colors, 46 00:03:49,020 --> 00:03:52,860 I'm just working with these since you can quickly see the impact. 47 00:03:52,860 --> 00:03:56,960 So here, we can set the background color to green for example 48 00:03:57,060 --> 00:03:59,470 and this looks beautiful, doesn't it? 49 00:03:59,490 --> 00:04:00,650 So that's what you already know, 50 00:04:00,660 --> 00:04:05,840 you can reach out to the style here and set it like this. On the elements tab 51 00:04:05,850 --> 00:04:11,520 by the way, you'll see that this indeed added the style attribute and reflected your change back into 52 00:04:11,520 --> 00:04:18,230 HTML here with the adjusted CSS styling even which you could add yourself in HTML, 53 00:04:18,330 --> 00:04:22,400 so this is what Javascript does for you behind the scenes. 54 00:04:22,440 --> 00:04:23,690 Now that's not too new, 55 00:04:23,700 --> 00:04:24,900 that's what we did before, 56 00:04:25,350 --> 00:04:31,740 let's now go back to our code into the HTML file and play with a bunch of CSS styles. For this, I'll 57 00:04:31,740 --> 00:04:34,680 add a style block here in the HTML file, 58 00:04:34,680 --> 00:04:40,110 of course we could also import some CSS file but I'm not writing that much CSS, so adding it here 59 00:04:40,110 --> 00:04:44,880 is fine and I'll add a red bg class here, 60 00:04:44,880 --> 00:04:50,670 so I'm writing some CSS here where the background color is set to red and the text color is set to 61 00:04:50,670 --> 00:04:51,970 white. 62 00:04:51,990 --> 00:05:01,820 I will also add a visible class here where I set display to block and an invisible class here where 63 00:05:01,820 --> 00:05:03,370 I set display to none 64 00:05:03,440 --> 00:05:07,420 and these are all just some CSS properties which I'm setting here. 65 00:05:07,430 --> 00:05:11,000 So now we have three CSS classes to play around with. 66 00:05:11,000 --> 00:05:13,940 Now let's say on section here, I'll add class 67 00:05:16,790 --> 00:05:27,080 red bg, so this red background is always there. With that added here, if we save this and we reload, we 68 00:05:27,080 --> 00:05:30,190 have this red background on this section, thanks to this class. 69 00:05:30,200 --> 00:05:30,380 Now 70 00:05:30,440 --> 00:05:35,660 no Javascript is involved in this step, this is just some regular CSS styling. 71 00:05:35,930 --> 00:05:44,900 Now here in the app.js file, I'll select this section here with document query selector section like 72 00:05:44,900 --> 00:05:46,130 this 73 00:05:46,130 --> 00:05:53,330 and now of course, we can change the background color here for example to blue, again using some inline 74 00:05:53,330 --> 00:05:55,670 styles and that's what I meant. 75 00:05:55,670 --> 00:06:00,890 Now if we reload, this is blue because whilst the classes are still there and theoretically, the styles 76 00:06:00,920 --> 00:06:07,220 but the class still get applied, due to the way CSS works inline styles have a higher priority and therefore 77 00:06:07,490 --> 00:06:11,300 overwrite the class styles, the clashing class styles. 78 00:06:11,630 --> 00:06:14,570 But that's not the main thing I wanted to show you here, 79 00:06:14,750 --> 00:06:21,680 instead let's now actually go there and remove this red background class and for this, we can reach out 80 00:06:21,680 --> 00:06:27,410 to class name, to this class name property on the element and set this to an empty string, 81 00:06:27,410 --> 00:06:32,730 this will basically set this class attribute to exactly this string. 82 00:06:32,810 --> 00:06:38,870 So if we save that and we reload, the blue background is gone because as you can tell here, nothing is 83 00:06:38,870 --> 00:06:43,550 assigned to the class attribute because we reset it to an empty string. 84 00:06:43,660 --> 00:06:44,650 Now that's convenient 85 00:06:44,650 --> 00:06:49,840 if you really just want to clear everything or if you then maybe want to set it back up on some code 86 00:06:49,870 --> 00:06:55,730 change, then you can also do that and now it will be there because we don't only set it in HTML, 87 00:06:55,780 --> 00:06:59,450 we also now set it again here in Javascript. 88 00:06:59,470 --> 00:07:07,090 And please also note, red bg is added here in HTML and now also here in Javascript and it's not 89 00:07:07,090 --> 00:07:08,960 added twice or anything like that, 90 00:07:09,040 --> 00:07:15,620 instead class is really set equal to your string here and now that can become a problem. 91 00:07:15,670 --> 00:07:21,970 Let's say we want to keep the red background but we want to add another class. 92 00:07:21,970 --> 00:07:27,160 Now right now, that means you have to set the string to the class you want to keep and your new class. 93 00:07:27,160 --> 00:07:29,190 Now for that, let's add a button here, 94 00:07:29,500 --> 00:07:32,620 maybe here and we say toggle visibility 95 00:07:35,700 --> 00:07:38,440 and let's select this button here in app.js. 96 00:07:38,550 --> 00:07:40,710 So here I'll select this button, 97 00:07:40,710 --> 00:07:49,530 since it's the only button, we can again use query selector button here and now on this button, we can 98 00:07:49,530 --> 00:07:55,110 do something we also saw before, we can call add event listener, add a click event and then here, an 99 00:07:55,110 --> 00:07:56,070 anonymous function, 100 00:07:56,070 --> 00:08:02,100 I'll use an arrow function, you can use whichever function type you want and there when we click it, I 101 00:08:02,100 --> 00:08:10,260 went to set class them equal to red bg visible, which is one of the other CSS classes I defined here 102 00:08:10,980 --> 00:08:12,180 and invisible 103 00:08:12,180 --> 00:08:14,060 if we are in visible mode. 104 00:08:14,070 --> 00:08:18,930 So I want to swap this visible mode depending on which mode we're currently in. 105 00:08:18,930 --> 00:08:21,360 Now that's a bit complex to code here, 106 00:08:21,360 --> 00:08:26,220 of course we could add extra variable which helps us manage the current visibility state. 107 00:08:26,220 --> 00:08:34,080 If we only want to do it with the selected section, I have to check if section class name is equal to 108 00:08:34,080 --> 00:08:40,290 red bg visible and that only works because I know I will at most have these two classes or I will exactly 109 00:08:40,290 --> 00:08:42,040 have these two classes eventually, 110 00:08:42,180 --> 00:08:46,860 if I had more classes that even change dynamically, that would be even harder to check here 111 00:08:47,190 --> 00:08:56,460 but here I know if I have that, then I want to set the class name here to red bg invisible, otherwise 112 00:08:56,460 --> 00:09:00,300 in the else case, I want to set it to red bg visible, 113 00:09:00,390 --> 00:09:07,050 right ? So now with that logic which again only works that well in quotation marks because we don't have 114 00:09:07,050 --> 00:09:11,880 more classes than these but even with that code, we already have quite a bit of code here 115 00:09:11,880 --> 00:09:18,390 but now if I reload this, if I click the button here, you see this in the end after clicking it twice toggles 116 00:09:18,390 --> 00:09:24,730 the visibility here as you can see on the right, dynamically changes the classes. 117 00:09:24,750 --> 00:09:29,760 Now a problem with that approach is that we manually have to keep track of the classes we add, which 118 00:09:29,760 --> 00:09:31,870 class is there and so on, 119 00:09:31,950 --> 00:09:39,120 now that can be done in an easier way. Instead of using this, you can use this class list object I was 120 00:09:39,150 --> 00:09:40,090 referring to. 121 00:09:40,230 --> 00:09:45,450 So class list is another property you have on every element node and there you've got a couple of 122 00:09:45,450 --> 00:09:51,050 nice methods, you've got a contains method to quickly check if a class is set. 123 00:09:51,210 --> 00:09:56,400 So for example here you could then easily check if the visible classes is set and don't worry about 124 00:09:56,400 --> 00:10:00,590 the entire string, you don't have to worry about other classes that might be set, 125 00:10:00,630 --> 00:10:03,180 you can simply check if that is set. 126 00:10:03,180 --> 00:10:08,670 You can also call add to add a new class or remove to remove a class, so that's all nice, 127 00:10:08,700 --> 00:10:14,420 you can replace a class and you can also toggle a class 128 00:10:14,490 --> 00:10:21,880 and here we can toggle the visible and the invisible class. 129 00:10:21,890 --> 00:10:27,460 Now I just have to go to index.html and initially here, I'll add visible as well 130 00:10:27,530 --> 00:10:33,590 and now class list will automatically check whether visible is set when we call toggle visible and we'll 131 00:10:33,590 --> 00:10:38,150 remove it if it is and add it otherwise and the same for invisible 132 00:10:38,150 --> 00:10:45,020 and the result of that is that if we now reload, this toggling works just as before but with less work 133 00:10:45,260 --> 00:10:46,360 from our side. 134 00:10:48,240 --> 00:10:54,420 Now of course here actually adding visible is totally irrelevant because invisible is the one that does 135 00:10:54,660 --> 00:11:00,930 the main work here and that sets display to none, so we can actually even comment out this visible part 136 00:11:01,140 --> 00:11:06,800 and only add invisible but I hope it becomes clear what the power of class list is, 137 00:11:06,800 --> 00:11:13,890 it makes managing CSS classes much easier and that overall allows you to dynamically add or remove or 138 00:11:13,890 --> 00:11:20,670 change classes, CSS classes on an element and therefore that in turn allows you to dynamically change 139 00:11:20,730 --> 00:11:27,360 styles because while you sometimes might want to change inline styles, more often than not, you want 140 00:11:27,360 --> 00:11:34,200 to add more complex styles to an element and instead of setting them all as inline styles in your Javascript 141 00:11:34,200 --> 00:11:40,020 code which also is hard to find for other developers, you typically want to take your CSS code 142 00:11:40,260 --> 00:11:43,020 and dynamically add or remove classes. 143 00:11:43,020 --> 00:11:48,040 That also makes it easier to work in a team where you might have one colleague working on the CSS 144 00:11:48,060 --> 00:11:51,690 styles and you working on the Javascript. 145 00:11:51,690 --> 00:11:57,840 If you have to set styles in Javascript with inline styles, then you have to know CSS and you have 146 00:11:57,840 --> 00:12:04,170 to align with your CSS colleague. If you use class list or class name but better class list for 147 00:12:04,170 --> 00:12:11,070 more flexibility, then your CSS colleague can give you the CSS code and you can dynamically add 148 00:12:11,100 --> 00:12:16,680 or remove classes from that code based on your logic, which simply makes working on that easier as well.