We've already seen a little bit of what we can do with the style attribute using JavaScript and this
lesson, we're going to explore even more that we can do.
So we know we can set the background color, we can set color and border font size.
We can also toggle the display value.
So that's none or block.
So we do display none then it's not visible within the page.
If you do just display block, then you make it visible.
Once again, there's more information about what is available within the case.
And there's also in the dorm strings.
We've got the background, background, color, image.
So there is a lot you can do.
So pretty much anything you can do a success you can do within the dorm as well.
So let's try that out.
And opening up our Ed, we've got a number of elements that we've been working with.
How about we select the each one and we make a quick update on it?
So this is the H1 element using document query selector selecting the each one, and we'll do some manipulations
on it directly within the console.
So we've got that element, each one.
And when we select style within the Chrome browser, you see there's quite a bit here within the dropdown.
We've looked at a few of these, such as background color.
So just as you would when you're setting it with success, you can do it in JavaScript as well.
So that's the background color.
There's also you can do color as well, and there's a lot of options.
So color and this, of course, will set the font color.
So that's how we make it yellow.
There's also things like the display properties, so style and display, so setting it to none.
So watch what happens to the H1.
It'll disappear.
If we want to bring it back, we can set it to block and that will make it visible again.
We can also increase the font size.
So instead of style, let's select font.
We can do font family.
Font size is the one that we're looking at.
So this can be any size that we want to set it up.
So how about we do it?
Forty picks make it really big.
Also you can set padding, you can set border.
So just as you would with scissors, you can set the border properties so you can do the shorthand for
border where we've got the dotted.
So the type of border and the color of the border and then the five picks is the width of the border.
You can see that it gets shown.
You can also do style padding as well.
So that's another common one that's done for a lot of elements and twenty five picks padding.
So I think you get the picture.
There is a lot of options when we are doing this styling.
So we also do have a challenge for this lesson.
And the challenge, of course, is to update some of the style properties of the element below so you
can use the ones that I've used in this example, like the background color, the color border, font
size.
And you can also do other ones as well to make things even more interesting.
So go ahead and pause the video, try it out for yourself and get more familiar with what you can do
with style.