So you want JavaScript, where you're going to get it in this lesson, or we're going to be updating
that element that we created in the last lesson and applying some styling to it.
And I know what you're thinking.
Well, it's a lot easier doing it in success, but that's not what you're here for.
You're here to learn practice JavaScript.
So selecting that my block object, applying the style value to the object and what we can do is we
can set a width so you can set all of your styling using JavaScript, just as you would with regular
styling, with success.
Next, let's do style and we can set a date for it and we'll set this one to be 100 picks as well.
You can also update and add within style.
And as you can see, there's a lot of options here.
Anything that you can do in staling, you can do here as well.
And I set the background color to read.
Let's refresh, see what this looks like.
Also, let's update the style color and set that to wait.
And now let's do some more interesting ones where we can set the line height.
So again, that my block object taking the style value and then applying line height.
So this will help vertically center the text content.
So set that to hundred pics and we'll also take the my block and style.
And this one is the text line so we can center align the text.
So let's refresh that.
See what that looks like.
So now we've got our text more centered.
Also want to be able to move this element around with JavaScript.
So we need to set its style and updating its style position value to be absolute.
And this will give us the ability to position it.
So taking style and we can position top position.
So let's set the top position and don't forget to add in the picks.
You always do need to add in the picks and the values are represented as string values.
So it's not numeric.
It's always a string value with the picks attached to it, just as you would when you're styling, adding
the style property.
So also a left position.
So let's do this as one fifty.
So see what it looks like now.
So go ahead and try this out practice.
Get more familiar with what your options are when you're updating the style of an element.
And you can also do this when you select an element from the page.
But just so happens that we want to really focus on JavaScript within this section.
So we are creating an element on the fly using JavaScript, and then we can attach all of those properties
and values when we've got that element that we're selecting.
And this element is always going to be available in the my block variable.
And this is global.
So we can reference it and we can update any of these values anywhere within our code.
So if we have a function, if we want to move it, we can update its style position of top and left,
and that will effectively move the element to a different spot.
And I'll show you how to do that in the upcoming lesson.