WEBVTT 0 00:00.420 --> 00:00.840 All right. 1 00:00.990 --> 00:07.200 So now that we know how to select elements using the DOM, it's time to learn how to use Javascript to 2 00:07.200 --> 00:10.060 manipulate the elements that we've selected. 3 00:10.110 --> 00:18.030 Now, as you saw earlier on, we were able to change the CSS style dynamically using Javascript by tapping 4 00:18.030 --> 00:21.060 into the style property of an element object. 5 00:21.060 --> 00:31.320 So, for example, we could say document.querySelector(“h1”).style.color = “red”. 6 00:32.070 --> 00:38.750 And that selects on the h1 element in our document, changes the style color to a red color. 7 00:38.760 --> 00:45.510 Now every single CSS property can be changed in this way using Javascript, but the property names might 8 00:45.510 --> 00:47.610 look a little bit different. 9 00:47.760 --> 00:52.830 As we said earlier on, Javascript naming conventions tend to be camel cased. 10 00:52.830 --> 00:56.760 So, for example querySelector, where the first word is lowercase 11 00:56.760 --> 00:59.940 and the second word begins with an uppercase letter. 12 00:59.940 --> 01:06.390 This is camel casing and this is standard for naming methods and properties in Javascript. 13 01:06.870 --> 01:12.720 So that means that when you're trying to change the CSS styles, you will find that the property names 14 01:12.750 --> 01:16.830 don't look quite the same as what you see in CSS. 15 01:16.860 --> 01:24.660 So, for example, we might have things like font size, which is font-size as the property name in CSS, 16 01:24.780 --> 01:30.810 but if you're trying to change it using Javascript, then the property is going to be camel cased like 17 01:30.810 --> 01:31.530 so. 18 01:31.530 --> 01:39.780 So let's change the font size to, I don’t know, something massive, 10rem. And you can find all of those names inside 19 01:39.780 --> 01:45.750 the DOM style object documentation and you'll see all of these properties and what they look like when 20 01:45.750 --> 01:49.910 you're trying to change it using Javascript instead of CSS. 21 01:49.960 --> 01:54.200 And I'll leave a link to this in the resources of this current lesson so you can check it out. 22 01:54.270 --> 01:58.740 But, as a rule of thumb, in most cases they're exactly the same, 23 01:58.740 --> 02:04.440 other than the fact that there are no dashes and every word after the first one will have its first 24 02:04.440 --> 02:06.000 letter capitalized. 25 02:06.000 --> 02:12.420 The other thing to notice is that the values that you're going to set it to have to be represented as 26 02:12.420 --> 02:20.370 strings. Whereas in CSS we simply just specified the value as is, for example padding 7 percent, if we're 27 02:20.370 --> 02:26.760 trying to do this with Javascript, then we actually have to specify everything as a string, even if it's 28 02:26.760 --> 02:28.770 a number, like line height or padding. 29 02:28.950 --> 02:34.460 So, just so you can see more clearly, I'm inside the Elements tab of the Chrome Developer Tools, 30 02:34.620 --> 02:42.600 and as you might remember, you can quite easily select an item over here and change its CSS by just typing 31 02:42.600 --> 02:43.530 it inside here, 32 02:43.530 --> 02:48.930 so say visibility is hidden, and that hides our h1. 33 02:49.230 --> 02:56.250 But if we wanted to do the same thing using Javascript, then we would have to specify that value “hidden” 34 02:56.640 --> 02:57.480 as a string. 35 02:58.440 --> 03:00.720 So remember those two differences. 36 03:00.720 --> 03:02.180 Now it's your turn to try it out. 37 03:02.370 --> 03:11.240 I want you to use Javascript only to change the background color of our button here to a yellow color. 38 03:11.370 --> 03:16.230 And you might have to take a look at the object style properties or you can just give it a go and see 39 03:16.260 --> 03:18.630 if you can predict what it might be. 40 03:18.630 --> 03:21.840 So pause the video now and give that challenge a go. 41 03:21.840 --> 03:22.110 All right. 42 03:22.140 --> 03:27.600 So you might already realize that in order to change the background color of our button, then in CSS you 43 03:27.600 --> 03:33.310 would simply just tap into the background color property and you would set it to yellow. 44 03:33.630 --> 03:35.810 And that would achieve what we wanted. 45 03:35.940 --> 03:41.460 But because we have to do it using Javascript, then we need to know the Javascript version of that background 46 03:41.460 --> 03:42.570 color property. 47 03:42.630 --> 03:50.070 So if we head over to our Style Object Properties documentation and we hit command f and we search for background 48 03:50.070 --> 03:54.150 color, then you can see that it brings up the property 49 03:54.210 --> 03:56.520 that’s called backgroundColor. 50 03:56.520 --> 04:02.220 And as some of you might have predicted it's simply the same property without the dash and camel case. 51 04:02.550 --> 04:06.430 So let's now use it inside our console. 52 04:06.510 --> 04:10.680 So we're going to tap into the document and query for the selector 53 04:10.680 --> 04:22.200 that is a button, and change its style property, namely the background color property, to, remember the value 54 04:22.200 --> 04:23.990 has to be specified as a string, 55 04:24.030 --> 04:26.130 so it's the word yellow 56 04:26.250 --> 04:28.390 inside some quotation marks. 57 04:28.410 --> 04:33.830 Now if we hit enter, our Javascript code has turned the background color of the button yellow. 58 04:34.050 --> 04:35.580 So if you found that difficult at all, 59 04:35.580 --> 04:40.350 then I recommend going through some of the other properties that we've been using in CSS and trying 60 04:40.350 --> 04:42.870 to do it using Javascript instead, 61 04:42.960 --> 04:46.420 and have a play around with the Chrome Developer Tools until you really get it. 62 04:46.470 --> 04:51.630 Now in the next lesson we're going to learn all about the separation of concerns and how we can keep 63 04:51.660 --> 04:57.230 our style inside the CSS but toggle it on and off using Javascript. 64 04:57.230 --> 05:00.240 So for all of that and more, I'll see you on the next lesson.