WEBVTT

00:01.320 --> 00:06.390
As I said in previous lecture, it's time to talk about another way which allows us to change the styles

00:06.390 --> 00:09.060
of elements using dumb classes, properties.

00:09.480 --> 00:11.320
Nowadays, this method is very popular.

00:11.340 --> 00:13.470
It allows you to avoid much typing.

00:13.470 --> 00:18.780
And it's more flexible when we want to change the Taliban elements using class attributes, we need

00:18.780 --> 00:22.740
to work with few properties which are a class name and class list.

00:23.640 --> 00:28.500
Let's talk about class name Prop. eight sets or returns, the class name of an element.

00:28.920 --> 00:34.710
In other words, it sets out returns the value of an aliments class attribute, class name, property

00:34.710 --> 00:36.210
always returns a string value.

00:37.320 --> 00:40.890
All right, let's open brackets and write some examples.

00:41.340 --> 00:43.500
First of all, I'm going to open style.

00:43.500 --> 00:44.520
That's file.

00:44.520 --> 00:50.550
And just for demonstrating some examples, I'm going to create multiple CISSP for class attributes,

00:51.030 --> 00:54.180
which we will assign to the elements using JavaScript soon.

00:54.750 --> 00:55.240
So right.

00:55.290 --> 00:57.090
Not change background.

00:58.230 --> 01:05.010
And inside the color braces, write background, color and Satou to yellow.

01:09.750 --> 01:19.200
Then right below that change, font and other class name and right font style italic.

01:22.600 --> 01:27.550
And then the font size set it to 40 pixels.

01:29.410 --> 01:32.170
OK, let's go back to our script I just filed.

01:32.540 --> 01:37.030
I'm going to select Ista Heading Element using Querrey Select Method.

01:37.330 --> 01:44.410
So write variable H2 two equals to document that query selector.

01:45.760 --> 01:50.460
Then inside the parentheses right header and then H2.

01:52.600 --> 01:54.810
And then using clustering property.

01:55.000 --> 01:58.780
Let's set class attribute for H2 heading element.

01:59.230 --> 02:00.220
Right H2.

02:01.750 --> 02:08.800
And again we need to use dot notation because as you already know, H2 element is an object and class

02:08.800 --> 02:10.490
name is a property of that object.

02:11.050 --> 02:17.620
So right dot class name and set the value of the class as change background.

02:21.210 --> 02:29.310
Reload and you can see that having elements background became yellow, and if you check H2 element in

02:29.580 --> 02:38.100
HTML document, then you will find that it has new attribute, which we have just assigned background

02:38.100 --> 02:45.300
color became yellow because as you remember, we have created in standard file new CSA style forclose

02:45.300 --> 02:46.770
attribute change background.

02:47.760 --> 02:53.030
OK, now let's set this second class attribute for having element which is change font.

02:54.840 --> 02:59.790
Let's go back to script OJs file and write H2 dot class name.

03:04.270 --> 03:05.860
Equals change font.

03:11.430 --> 03:19.800
Reloads and you notice that front of heading element became larger and italic, but background color

03:19.800 --> 03:21.750
of this element is no longer yellow.

03:22.470 --> 03:28.620
It means that when we assigned the second class attribute the change font, then it has removed the

03:28.620 --> 03:34.320
previous one, which was changed background in order to maintain both class attributes.

03:34.320 --> 03:38.570
At the same time, we can use a little trick for that.

03:38.580 --> 03:43.310
I'm going to use a different assignment operator, which is plus equals sign.

03:43.980 --> 03:48.030
But before I use it, I want to briefly demonstrate how this operator works.

03:48.810 --> 04:00.780
So let's create a variable A and set eight to 10, then use this operator and write a plus equals 20.

04:03.440 --> 04:06.350
Then getting counsel right to counsel that look a.

04:09.440 --> 04:21.080
Reload and we have 30, it's the same as the following, that comment is out and writes A equals eight

04:21.080 --> 04:22.160
plus twenty.

04:24.560 --> 04:27.580
So you see that we have the same result.

04:29.760 --> 04:36.660
Let's get rid of these codes and use this operator with custom attributes just right here, plus sign

04:38.070 --> 04:39.320
before equals sign.

04:39.330 --> 04:46.160
And in order to add these class name as a different one, we need to separate those class names with

04:46.170 --> 04:46.650
space.

04:49.150 --> 04:57.070
Refresh and we have a larger font with background color yellow, that's because we have assigned to

04:57.210 --> 05:00.970
H2 elements, both class names changed background and changed font.

05:04.160 --> 05:11.450
OK, as we said, class name property returns to values, and in order to prove it, let's right cancel

05:11.450 --> 05:11.990
that log.

05:16.860 --> 05:19.620
Then H2 taught class name.

05:24.130 --> 05:33.550
Reload and you see that we have the class names here, then check the type of these values using type

05:33.550 --> 05:34.360
of operator.

05:34.540 --> 05:35.350
So right.

05:35.920 --> 05:37.780
Type of inside the parentheses.

05:41.720 --> 05:43.580
And we have strict.

05:46.150 --> 05:49.360
OK, this was class named property.

05:49.870 --> 05:55.270
Now let's talk about another one, which, as I said in the beginning of the lecture, is class leased

05:55.300 --> 05:55.840
property.

05:56.110 --> 06:01.120
It returns the class name or class names of an element as that dorm Tolkan least object.

06:01.720 --> 06:04.630
And because of that, it's a read on the property.

06:04.960 --> 06:10.600
You can use multiple methods in order to add, remove and toggle class attributes.

06:11.800 --> 06:12.310
All right.

06:12.850 --> 06:15.660
Let's see how this property works at first.

06:15.670 --> 06:17.200
Get rid of these codes and.

06:17.200 --> 06:22.810
Right, cancel that log H2 dot class list.

06:28.240 --> 06:36.640
Reload and you see that we have our class name inside the square brackets, if we drop down it, we

06:36.640 --> 06:38.740
will see that it's called dumb talk.

06:38.740 --> 06:47.320
At least don't talk unless it looks like a collection, or at least it's an array like object as well,

06:47.680 --> 06:51.900
which has length property and the items have zero based index numbers.

06:52.240 --> 06:57.190
This kind of object allows us to use methods that we have mentioned a few seconds ago.

06:58.090 --> 07:04.690
Now let's see how they work with class property in order to add second class name, which will change

07:04.690 --> 07:13.290
font, we need to write to that class list and then we need to use add method.

07:13.300 --> 07:17.380
And inside the parentheses we need to pass name of the class as a string.

07:18.190 --> 07:19.030
Right dot.

07:19.060 --> 07:21.520
Add that inside the parentheses.

07:21.520 --> 07:24.010
Write change font.

07:29.280 --> 07:37.020
Reload and you see that font is changed and also in Castle, we can see that new class name was added

07:37.020 --> 07:41.310
to dump at list using classless property.

07:41.310 --> 07:46.440
And at Methode we add new class name and simultaneously maintain the previous ones.

07:47.550 --> 07:52.460
Working in this way allows us to avoid using plus equals operator.

07:52.470 --> 07:54.710
That was in case of class named property.

07:55.680 --> 08:00.780
Besides the ADD method we can use removed, which actually removes class name from the list.

08:01.860 --> 08:04.530
So let's write to that class list.

08:07.380 --> 08:08.370
Dot remove.

08:11.350 --> 08:15.460
And inside the parentheses, right, class name change background.

08:19.040 --> 08:26.750
Refresh and the yellow background is removed and also the name is deleted from the list.

08:28.680 --> 08:32.390
OK, the next method and a bit interesting is Tuggle.

08:32.740 --> 08:39.380
This method removes the class name if it does exist and adds it if it doesn't exist.

08:40.080 --> 08:43.800
So write another line of code and use Targo method.

08:43.980 --> 08:45.900
Right, H2 dot class list.

08:48.530 --> 08:59.300
Dr. Tuggle and inside the parentheses, right again, the class name change background before I reload,

08:59.330 --> 09:00.760
let's explain once again.

09:01.250 --> 09:08.410
So here we do not have changed background, class name, and in this case, Torgau method will add it

09:08.420 --> 09:09.070
to the list.

09:09.890 --> 09:15.650
So refresh and you see that we have changed background.

09:16.280 --> 09:24.200
But if we comment this line of code out, then tago method will remove change background class name

09:24.200 --> 09:24.890
from the list.

09:28.020 --> 09:32.850
All right, that's the way how closely the property with its methods works.

09:33.600 --> 09:39.030
There are also other methods, but the methods that we have discussed are the most commonly used and

09:39.030 --> 09:39.540
popular.

09:41.520 --> 09:49.140
OK, so in this lecture, we have learned how to change Thalib elements using class name and class properties.

09:49.770 --> 09:50.970
See you in the next video.