All language subtitles for 005 Manipulating and Changing Styles of HTML Elements with Javascript.en

All right.

So now that we know how to select elements using the DOM, it's time to learn how to use Javascript to

manipulate the elements that we've selected.

Now, as you saw earlier on, we were able to change the CSS style dynamically using Javascript by tapping

into the style property of an element object.

So, for example, we could say document.querySelector(“h1”).style.color = “red”.

And that selects on the h1 element in our document, changes the style color to a red color.

Now every single CSS property can be changed in this way using Javascript, but the property names might

look a little bit different.

As we said earlier on, Javascript naming conventions tend to be camel cased.

So, for example querySelector, where the first word is lowercase

and the second word begins with an uppercase letter.

This is camel casing and this is standard for naming methods and properties in Javascript.

So that means that when you're trying to change the CSS styles, you will find that the property names

don't look quite the same as what you see in CSS.

So, for example, we might have things like font size, which is font-size as the property name in CSS,

but if you're trying to change it using Javascript, then the property is going to be camel cased like

so.

So let's change the font size to, I don’t know, something massive, 10rem. And you can find all of those names inside

the DOM style object documentation and you'll see all of these properties and what they look like when

you're trying to change it using Javascript instead of CSS.

And I'll leave a link to this in the resources of this current lesson so you can check it out.

But, as a rule of thumb, in most cases they're exactly the same,

other than the fact that there are no dashes and every word after the first one will have its first

letter capitalized.

The other thing to notice is that the values that you're going to set it to have to be represented as

strings. Whereas in CSS we simply just specified the value as is, for example padding 7 percent, if we're

trying to do this with Javascript, then we actually have to specify everything as a string, even if it's

a number, like line height or padding.

So, just so you can see more clearly, I'm inside the Elements tab of the Chrome Developer Tools,

and as you might remember, you can quite easily select an item over here and change its CSS by just typing

it inside here,

so say visibility is hidden, and that hides our h1.

But if we wanted to do the same thing using Javascript, then we would have to specify that value “hidden”

as a string.

So remember those two differences.

Now it's your turn to try it out.

I want you to use Javascript only to change the background color of our button here to a yellow color.

And you might have to take a look at the object style properties or you can just give it a go and see

if you can predict what it might be.

So pause the video now and give that challenge a go.

All right.

So you might already realize that in order to change the background color of our button, then in CSS you

would simply just tap into the background color property and you would set it to yellow.

And that would achieve what we wanted.

But because we have to do it using Javascript, then we need to know the Javascript version of that background

color property.

So if we head over to our Style Object Properties documentation and we hit command f and we search for background

color, then you can see that it brings up the property

that’s called backgroundColor.

And as some of you might have predicted it's simply the same property without the dash and camel case.

So let's now use it inside our console.

So we're going to tap into the document and query for the selector

that is a button, and change its style property, namely the background color property, to, remember the value

has to be specified as a string,

so it's the word yellow

inside some quotation marks.

Now if we hit enter, our Javascript code has turned the background color of the button yellow.

So if you found that difficult at all,

then I recommend going through some of the other properties that we've been using in CSS and trying

to do it using Javascript instead,

and have a play around with the Chrome Developer Tools until you really get it.

Now in the next lesson we're going to learn all about the separation of concerns and how we can keep

our style inside the CSS but toggle it on and off using Javascript.

So for all of that and more, I'll see you on the next lesson.