Transcript

          So in the last lecture I briefly showed you how to change the style of an element by directly setting

the style attribute of that element using set attribute.

But there's one major drawback to that.

So let me demo this.

First of all, inside index.html, we just have an H1.

It has a style attribute and that style is just color is orange.

So it looks something like this in the browser.

Now imagine we want to add a new style to this style attribute.

Well, if we come down here, we've got a title reference already.

We've stored that in here, that is Queryselector and we're getting the H1, which is that.

So we can just say title and then use set attribute.

We're going to set the style attribute.

And what we want to do is add a margin.

So I'm just going to say margin is going to be 50 pixels.

So what's going to happen when I do this?

Well, if I save it and come over here, we can see we get that margin.

But it's totally overwritten the orange thing right here because we colored it orange in the HTML.

So when we use this method set attribute, especially when we come to styles and we want to add additional

styles, it's just going to completely overwrite what's currently there.

So I don't want this behavior.

I want to be able to add extra styles instead of just completely overwriting them.

So how can I do this?

Well, we can do that in JavaScript using the style property.

So first of all, I'm going to log this to the console so we can take a look at it.

I'm going to say console, dot log, and then we want the title, which is this thing up here.

Then we say dot style.

This is a property of this element so that if I save this now and preview over here in the console,

we can see this big object and it has all of these different properties.

These are all CSS properties and we can see most of them are empty.

But if we scroll down to color, we can see the color is orange because that's what we set it to be

in the HTML.

So we can use this style property to add styles on the fly or remove them as well.

So imagine I want to get the color style property and I just want to see that I could say console dot

log.

We want the title dot style and then in the style object over here, when we logged it to the console,

we just grab whatever the property name is.

That's the CSS property name, right color.

So we can say dot color and that should give us orange.

So we see that right there.

Awesome.

Now what if I want to add styles then?

Well, I can come down here and say title dot styles or style rather then the property name that I want

to add a value to.

Now it can be any one of these different properties listed right here.

This is every single CSS style or CSS property name.

So I can say something like margin and I can set that equal to something.

It's in a string 50 pixels.

Now if I save that and refresh, we see we get the margin.

If I inspect, we can see this now has a margin, but it also still has the color.

We've not overwritten that.

We've just added a new property.

So for that reason, this way is better than this way.

Okay, So let's do another example.

Let's say I want to change the color style so we already have orange right here.

If I want to change that, I can say title dot style dot color is equal to crimson.

Save that and let's view this in a browser and we can see that updates the color now and we can see

over here the color is crimson and it still has the margin.

So again, it's not overwritten anything.

Well, it has it's overwritten the original color, but not the margin.

All right.

So what if I want to do something like the font size?

Well, in CSS, the property is font hyphen size and then we give it something.

But we can't do that in JavaScript because it looks at this and says, okay, well you're taking the

font and you're trying to subtract this thing right here the size.

So in JavaScript, when we have a double barrel property name like this, we take away that and we use

Camelcase like so, so what we can say is title dot style dot font size and set that equal to something.

I'm just going to set it equal to 60 pixels, save it and check it out in a browser.

And now we can see it has a font size of 60 pixels as well.

Now if you're unsure of what the name will be, remember always refer back to the style property and

just look inside that.

So if we open this up, we can see all of the different names right here.

Okay, So for example, border left color, you can see it's camelcase.

Okay.

So if we want to delete a style, we can just.

Grab it by saying titlestyle.

Then the property name, for example, margin.

Then I'm going to set that equal to an empty string.

So it was 50 pixels before when we set it here.

Now I'm setting it to an empty string, so it basically removes that property.

So if I check this out, we can see the margin has now gone and inside the style attribute, we no longer

see margin.

So most of the time that we're adding or removing just a single style, I use this way of doing it rather

than the set attribute method.

But a lot of the time, instead of just adding inline styles this way it can be easier to predefine

all of your CSS classes in a style sheet somewhere and then use JavaScript to add, remove or change

classes on your HTML elements and we'll see how to do that in the very next lecture.