In this lesson, we're going to look at element style with JavaScript, so you have an option using
that element style in order to set one style, as we saw earlier, where we were setting the background
color.
So this is an example of setting one style.
You can use color as well and update the color of those elements.
And as you can see, when you inspect the particular element, you're going to see that that element
is going to have that style property added into it.
So we see we got background color blue and that gets dynamically added in via JavaScript as we click
through.
So if we were to refresh it, you see when the page loads output doesn't have any style attribute and
when we click it, we have a style attribute added in.
And there are two ways to actually add in a multiple element styles into your element using JavaScript
so we can use set attribute where we can set the style attribute and we can also do the access text
where we can do within the same format.
So this part here is the same and it's just different ways to set it.
So we have a couple of options and usually I do prefer doing the set attribute style over the access
text, but this is optional as well.
So let's go down and we're going to shrink this back down and I'm going to get rid of this output style.
I'm going to just simply comment about the block comment so that we can still have it there as a guide.
So whenever the page loads, I've got my output area here and I'm going to take output and I'm going
to apply the style to it.
So I'm going to set the attribute style to this particular element.
And then within here is where I can specify the different styles that I want to add in so we can see
we've got color red.
So I'll use that as a starting point and we'll just add that one in, go back out and refresh and we
see that it's afternoon.
So currently we have color red, background, color blue.
So we're still setting those background colors dynamically.
But by default, we have a color of red.
And you can see that it's the same format as we see up here within our success.
So if I was to take width and simply copy that in, let's refresh and you can see that the width of
two hundred is added in.
If I wanted to add in height and make sure that you're adding in that semicolon there.
So if we wanted to add in a height of one hundred.
So now when I refresh it and you can see that the height is one hundred.
So even if I refresh and if I go to inspect, I'm already adding in the color red.
I'm adding in the width two hundred and height one hundred.
And you can also update this to be white as well.
So it's consistent with there.
And then there's also text a line.
So instead of setting these individually, which, of course, you do have a choice to as well, this
is much more efficient doing it this way, especially if you're setting in multiple properties.
So there we go.
We've got our text A and as mentioned, the other option is you can set this within this type of format
where we can simply grab the content here and added in within a string type format.
And I'll comment this one out.
And we do need to select our element.
And that was output.
So make sure we're adding in output style.
Refresh the page.
And as you can see, when we do inspect, all of the styling is added in within the same way into our
element attribute.
So either wait, go ahead and try out both and update, get rid of those that success styling and use
JavaScript instead, get comfortable with adding in JavaScript and updating your style properties using
JavaScript.
Tried it for yourself.