As I said in previous lecture, it's time to talk about another way which allows us to change the styles
of elements using dumb classes, properties.
Nowadays, this method is very popular.
It allows you to avoid much typing.
And it's more flexible when we want to change the Taliban elements using class attributes, we need
to work with few properties which are a class name and class list.
Let's talk about class name Prop. eight sets or returns, the class name of an element.
In other words, it sets out returns the value of an aliments class attribute, class name, property
always returns a string value.
All right, let's open brackets and write some examples.
First of all, I'm going to open style.
That's file.
And just for demonstrating some examples, I'm going to create multiple CISSP for class attributes,
which we will assign to the elements using JavaScript soon.
So right.
Not change background.
And inside the color braces, write background, color and Satou to yellow.
Then right below that change, font and other class name and right font style italic.
And then the font size set it to 40 pixels.
OK, let's go back to our script I just filed.
I'm going to select Ista Heading Element using Querrey Select Method.
So write variable H2 two equals to document that query selector.
Then inside the parentheses right header and then H2.
And then using clustering property.
Let's set class attribute for H2 heading element.
Right H2.
And again we need to use dot notation because as you already know, H2 element is an object and class
name is a property of that object.
So right dot class name and set the value of the class as change background.
Reload and you can see that having elements background became yellow, and if you check H2 element in
HTML document, then you will find that it has new attribute, which we have just assigned background
color became yellow because as you remember, we have created in standard file new CSA style forclose
attribute change background.
OK, now let's set this second class attribute for having element which is change font.
Let's go back to script OJs file and write H2 dot class name.
Equals change font.
Reloads and you notice that front of heading element became larger and italic, but background color
of this element is no longer yellow.
It means that when we assigned the second class attribute the change font, then it has removed the
previous one, which was changed background in order to maintain both class attributes.
At the same time, we can use a little trick for that.
I'm going to use a different assignment operator, which is plus equals sign.
But before I use it, I want to briefly demonstrate how this operator works.
So let's create a variable A and set eight to 10, then use this operator and write a plus equals 20.
Then getting counsel right to counsel that look a.
Reload and we have 30, it's the same as the following, that comment is out and writes A equals eight
plus twenty.
So you see that we have the same result.
Let's get rid of these codes and use this operator with custom attributes just right here, plus sign
before equals sign.
And in order to add these class name as a different one, we need to separate those class names with
space.
Refresh and we have a larger font with background color yellow, that's because we have assigned to
H2 elements, both class names changed background and changed font.
OK, as we said, class name property returns to values, and in order to prove it, let's right cancel
that log.
Then H2 taught class name.
Reload and you see that we have the class names here, then check the type of these values using type
of operator.
So right.
Type of inside the parentheses.
And we have strict.
OK, this was class named property.
Now let's talk about another one, which, as I said in the beginning of the lecture, is class leased
property.
It returns the class name or class names of an element as that dorm Tolkan least object.
And because of that, it's a read on the property.
You can use multiple methods in order to add, remove and toggle class attributes.
All right.
Let's see how this property works at first.
Get rid of these codes and.
Right, cancel that log H2 dot class list.
Reload and you see that we have our class name inside the square brackets, if we drop down it, we
will see that it's called dumb talk.
At least don't talk unless it looks like a collection, or at least it's an array like object as well,
which has length property and the items have zero based index numbers.
This kind of object allows us to use methods that we have mentioned a few seconds ago.
Now let's see how they work with class property in order to add second class name, which will change
font, we need to write to that class list and then we need to use add method.
And inside the parentheses we need to pass name of the class as a string.
Right dot.
Add that inside the parentheses.
Write change font.
Reload and you see that font is changed and also in Castle, we can see that new class name was added
to dump at list using classless property.
And at Methode we add new class name and simultaneously maintain the previous ones.
Working in this way allows us to avoid using plus equals operator.
That was in case of class named property.
Besides the ADD method we can use removed, which actually removes class name from the list.
So let's write to that class list.
Dot remove.
And inside the parentheses, right, class name change background.
Refresh and the yellow background is removed and also the name is deleted from the list.
OK, the next method and a bit interesting is Tuggle.
This method removes the class name if it does exist and adds it if it doesn't exist.
So write another line of code and use Targo method.
Right, H2 dot class list.
Dr. Tuggle and inside the parentheses, right again, the class name change background before I reload,
let's explain once again.
So here we do not have changed background, class name, and in this case, Torgau method will add it
to the list.
So refresh and you see that we have changed background.
But if we comment this line of code out, then tago method will remove change background class name
from the list.
All right, that's the way how closely the property with its methods works.
There are also other methods, but the methods that we have discussed are the most commonly used and
popular.
OK, so in this lecture, we have learned how to change Thalib elements using class name and class properties.
See you in the next video.