WEBVTT 00:01.590 --> 00:08.130 It's time to talk about another feature of Tom, if you're familiar with CSX, then you know that CSX 00:08.130 --> 00:15.450 is used for styling and designing the page, but in most cases, it happens in a static mode. 00:16.530 --> 00:22.320 Dom allows us to use JavaScript in order to change the styles of HTML elements dynamically. 00:23.310 --> 00:23.820 All right. 00:24.300 --> 00:31.320 Let's go back to our developer tools and write some codes in order to change the style of one of the 00:31.830 --> 00:32.340 elements. 00:32.820 --> 00:36.840 At first, we need to use any of the DOM methods to select this element. 00:37.950 --> 00:40.340 You already know how to do that. 00:40.350 --> 00:43.560 Let's go to Elements section. 00:45.030 --> 00:52.410 In this case, I'm going to select H2 heading element, which is node manager, and I'm going to use 00:52.410 --> 00:53.640 query select method. 00:54.360 --> 00:59.780 So write variable H2 equals documents. 00:59.790 --> 01:01.410 Dot query selector. 01:05.510 --> 01:11.060 And inside the parentheses, that's right, header and then H2 element. 01:15.160 --> 01:21.640 So here we have a STEM element node manager, and in order to change the style of this element, we 01:21.640 --> 01:24.270 need to use tile object with its properties. 01:24.730 --> 01:29.620 So we need to write to then use documentation. 01:31.420 --> 01:31.820 Right. 01:31.900 --> 01:32.940 Tile object. 01:33.760 --> 01:42.560 And then one of the properties, let's say color equals and write the value as a string read. 01:43.180 --> 01:47.680 So here we have selected H2 heading elements than using documentation. 01:47.680 --> 01:54.050 We have attached it to dump style object and then we have the property of this object in this case column. 01:54.700 --> 01:59.650 Let's run it and see that the color of the heading is changed into red. 02:01.700 --> 02:09.470 If we check the hiding element in the Actimel file, you will notice that it contains STAL attribute 02:09.470 --> 02:10.590 with color property. 02:11.000 --> 02:16.040 So when we use tile object, then we create in line for HTML elements. 02:17.740 --> 02:23.850 Instead of color, you can use any of the excess properties, but there is a slight difference. 02:24.670 --> 02:31.150 For example, that's use background, color, property, right, H2, dot style. 02:33.750 --> 02:42.510 That background, you know, that in Texas, we write this property using Desh, so right dash color 02:42.510 --> 02:43.650 equals to. 02:45.900 --> 02:54.660 Let's say green, if we run it, you will see that we have an error because in JavaScript, using Desh 02:54.660 --> 02:57.800 sign means that it's the minus sign. 02:59.220 --> 03:05.850 Therefore, JavaScript developers decided that if property contains two or more words than to use Camil 03:05.850 --> 03:06.470 case method. 03:07.140 --> 03:12.150 So we need to write the following background color. 03:14.660 --> 03:16.880 And the caller with Capital Letter. 03:19.000 --> 03:27.520 So the background color of padding element is changed into green, if we check H2 element in HTML document, 03:28.120 --> 03:35.980 you will see that inside the H2 tag we have again attribute with the background color property that 03:35.980 --> 03:39.540 we have just set with background color property. 03:39.550 --> 03:41.580 We still have the color property. 03:42.220 --> 03:51.040 So it means that using style object we add other properties each time without removing the recent inline 03:51.070 --> 03:51.700 s. 03:54.280 --> 04:02.110 If we use another method which returns multiple elements as a team of collections or no lists, then 04:02.110 --> 04:07.060 in order to change the style of one of these elements, we need to indicate the proper index number 04:07.060 --> 04:08.200 of HTML element. 04:09.100 --> 04:14.420 And if you want to change the four of those elements, then you need to use look. 04:15.760 --> 04:21.160 All right, let's use Kosilek all method and choose list elements. 04:21.790 --> 04:26.650 So write variable Ellyse equals documents. 04:26.650 --> 04:28.420 Dot Querrey selector all. 04:30.830 --> 04:35.440 Then inside the parentheses, that's indicate you are alive. 04:41.010 --> 04:48.930 So you see that we have at least elements as a novelist least, no, I'm going to select second elements 04:48.930 --> 04:50.550 and change the style of it. 04:51.030 --> 04:56.900 So we need to write Ellyse than inside the square brackets. 04:56.910 --> 04:59.850 We need to indicate the index number of second elements. 05:00.300 --> 05:04.320 Therefore, we need to write here one, then Dolz style. 05:06.970 --> 05:08.620 That background color. 05:11.610 --> 05:12.570 Equals to read. 05:15.500 --> 05:19.880 So second largest element has changed its background, color, interact. 05:20.710 --> 05:27.480 All right, as we said, in order to change the style of all these elements, we need to use a looks. 05:28.550 --> 05:31.900 Let's select again list elements, right. 05:31.910 --> 05:35.810 Variable Ellyse equals document where we select all. 05:39.700 --> 05:41.860 And then you will I. 05:46.310 --> 05:58.050 Now, let's use for a loop right for now, then create the variable as a counter right var I equals 05:58.070 --> 06:05.830 to zero, then we need to write the condition I is less than l. 06:05.940 --> 06:11.360 I start the length and then the increment I plus plus. 06:13.410 --> 06:22.140 When you need to use multiple lines in council, you can just simply press shift, enter and use multiple 06:22.140 --> 06:22.570 lines. 06:22.980 --> 06:28.860 So right here, Ellyse then in square brackets. 06:30.250 --> 06:30.680 Right. 06:31.150 --> 06:37.480 The variable I then style that background color. 06:42.370 --> 06:45.070 And change the background color into blue. 06:50.630 --> 06:58.760 So here we have all these items with backgrounds, and again, if you check the original document, 06:58.760 --> 07:04.250 you will see that all the list items have background color blue as an inline style. 07:06.480 --> 07:14.550 All right, there is another way to change this style of elements using scissors taxed property, which 07:14.550 --> 07:17.300 allows us to change multiple styles of elements. 07:17.790 --> 07:22.290 But when we use tax property, there is one thing to remember and note. 07:22.890 --> 07:25.920 It removes all the default inline styles. 07:27.480 --> 07:35.870 Let's see how it works, right, allies and select the first list element, so right, the index number 07:35.880 --> 07:42.870 zero, then dot style and use excess tax property. 07:42.870 --> 07:43.200 Right. 07:43.200 --> 07:47.010 Dot text equals. 07:48.310 --> 07:51.820 And let's change the background color, so right background. 07:55.080 --> 08:03.300 In this case, we don't need to use Camil case anymore because we need to assign a value to excess tax 08:03.300 --> 08:13.680 property as a string so right background dash color and indicate the color as yellow as we said, we 08:13.680 --> 08:20.010 can change multiple styles simultaneously, but they should be separated by semicolons. 08:20.550 --> 08:27.270 So write your semicolon and then font size 25 pixels. 08:28.850 --> 08:36.290 So you can see that first list item has changed its styles, and if you check it in HTML document, 08:36.710 --> 08:40.440 you will notice that recent in lifestyle is remote. 08:40.880 --> 08:45.710 I mean, the background color blue and it's replaced with new styles. 08:47.160 --> 08:50.240 That's the way how CSX tax property works. 08:52.280 --> 08:59.670 OK, so in this lecture, you have learned how to change dynamically using Dharmsala object. 09:00.110 --> 09:05.060 There is another way to change this style using classis, which you will see in the next video. 09:06.020 --> 09:06.710 Let's go ahead.