It's time to talk about another feature of Tom, if you're familiar with CSX, then you know that CSX
is used for styling and designing the page, but in most cases, it happens in a static mode.
Dom allows us to use JavaScript in order to change the styles of HTML elements dynamically.
All right.
Let's go back to our developer tools and write some codes in order to change the style of one of the
elements.
At first, we need to use any of the DOM methods to select this element.
You already know how to do that.
Let's go to Elements section.
In this case, I'm going to select H2 heading element, which is node manager, and I'm going to use
query select method.
So write variable H2 equals documents.
Dot query selector.
And inside the parentheses, that's right, header and then H2 element.
So here we have a STEM element node manager, and in order to change the style of this element, we
need to use tile object with its properties.
So we need to write to then use documentation.
Right.
Tile object.
And then one of the properties, let's say color equals and write the value as a string read.
So here we have selected H2 heading elements than using documentation.
We have attached it to dump style object and then we have the property of this object in this case column.
Let's run it and see that the color of the heading is changed into red.
If we check the hiding element in the Actimel file, you will notice that it contains STAL attribute
with color property.
So when we use tile object, then we create in line for HTML elements.
Instead of color, you can use any of the excess properties, but there is a slight difference.
For example, that's use background, color, property, right, H2, dot style.
That background, you know, that in Texas, we write this property using Desh, so right dash color
equals to.
Let's say green, if we run it, you will see that we have an error because in JavaScript, using Desh
sign means that it's the minus sign.
Therefore, JavaScript developers decided that if property contains two or more words than to use Camil
case method.
So we need to write the following background color.
And the caller with Capital Letter.
So the background color of padding element is changed into green, if we check H2 element in HTML document,
you will see that inside the H2 tag we have again attribute with the background color property that
we have just set with background color property.
We still have the color property.
So it means that using style object we add other properties each time without removing the recent inline
s.
If we use another method which returns multiple elements as a team of collections or no lists, then
in order to change the style of one of these elements, we need to indicate the proper index number
of HTML element.
And if you want to change the four of those elements, then you need to use look.
All right, let's use Kosilek all method and choose list elements.
So write variable Ellyse equals documents.
Dot Querrey selector all.
Then inside the parentheses, that's indicate you are alive.
So you see that we have at least elements as a novelist least, no, I'm going to select second elements
and change the style of it.
So we need to write Ellyse than inside the square brackets.
We need to indicate the index number of second elements.
Therefore, we need to write here one, then Dolz style.
That background color.
Equals to read.
So second largest element has changed its background, color, interact.
All right, as we said, in order to change the style of all these elements, we need to use a looks.
Let's select again list elements, right.
Variable Ellyse equals document where we select all.
And then you will I.
Now, let's use for a loop right for now, then create the variable as a counter right var I equals
to zero, then we need to write the condition I is less than l.
I start the length and then the increment I plus plus.
When you need to use multiple lines in council, you can just simply press shift, enter and use multiple
lines.
So right here, Ellyse then in square brackets.
Right.
The variable I then style that background color.
And change the background color into blue.
So here we have all these items with backgrounds, and again, if you check the original document,
you will see that all the list items have background color blue as an inline style.
All right, there is another way to change this style of elements using scissors taxed property, which
allows us to change multiple styles of elements.
But when we use tax property, there is one thing to remember and note.
It removes all the default inline styles.
Let's see how it works, right, allies and select the first list element, so right, the index number
zero, then dot style and use excess tax property.
Right.
Dot text equals.
And let's change the background color, so right background.
In this case, we don't need to use Camil case anymore because we need to assign a value to excess tax
property as a string so right background dash color and indicate the color as yellow as we said, we
can change multiple styles simultaneously, but they should be separated by semicolons.
So write your semicolon and then font size 25 pixels.
So you can see that first list item has changed its styles, and if you check it in HTML document,
you will notice that recent in lifestyle is remote.
I mean, the background color blue and it's replaced with new styles.
That's the way how CSX tax property works.
OK, so in this lecture, you have learned how to change dynamically using Dharmsala object.
There is another way to change this style using classis, which you will see in the next video.
Let's go ahead.