1
00:00:01,690 --> 00:00:08,050
In this lesson, we're going to look at element style with JavaScript, so you have an option using

2
00:00:08,050 --> 00:00:14,860
that element style in order to set one style, as we saw earlier, where we were setting the background

3
00:00:14,860 --> 00:00:15,170
color.

4
00:00:15,190 --> 00:00:17,440
So this is an example of setting one style.

5
00:00:17,560 --> 00:00:21,940
You can use color as well and update the color of those elements.

6
00:00:22,090 --> 00:00:27,940
And as you can see, when you inspect the particular element, you're going to see that that element

7
00:00:27,940 --> 00:00:30,600
is going to have that style property added into it.

8
00:00:30,820 --> 00:00:37,510
So we see we got background color blue and that gets dynamically added in via JavaScript as we click

9
00:00:37,510 --> 00:00:37,730
through.

10
00:00:37,750 --> 00:00:43,210
So if we were to refresh it, you see when the page loads output doesn't have any style attribute and

11
00:00:43,210 --> 00:00:46,000
when we click it, we have a style attribute added in.

12
00:00:46,480 --> 00:00:55,300
And there are two ways to actually add in a multiple element styles into your element using JavaScript

13
00:00:55,540 --> 00:01:03,610
so we can use set attribute where we can set the style attribute and we can also do the access text

14
00:01:03,880 --> 00:01:06,010
where we can do within the same format.

15
00:01:06,280 --> 00:01:11,350
So this part here is the same and it's just different ways to set it.

16
00:01:11,560 --> 00:01:18,910
So we have a couple of options and usually I do prefer doing the set attribute style over the access

17
00:01:18,910 --> 00:01:21,510
text, but this is optional as well.

18
00:01:21,700 --> 00:01:27,990
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.

19
00:01:28,000 --> 00:01:33,250
I'm going to just simply comment about the block comment so that we can still have it there as a guide.

20
00:01:33,580 --> 00:01:40,030
So whenever the page loads, I've got my output area here and I'm going to take output and I'm going

21
00:01:40,030 --> 00:01:41,710
to apply the style to it.

22
00:01:41,920 --> 00:01:46,210
So I'm going to set the attribute style to this particular element.

23
00:01:46,840 --> 00:01:53,050
And then within here is where I can specify the different styles that I want to add in so we can see

24
00:01:53,050 --> 00:01:54,420
we've got color red.

25
00:01:54,640 --> 00:02:01,330
So I'll use that as a starting point and we'll just add that one in, go back out and refresh and we

26
00:02:01,330 --> 00:02:03,150
see that it's afternoon.

27
00:02:03,160 --> 00:02:07,360
So currently we have color red, background, color blue.

28
00:02:07,480 --> 00:02:10,120
So we're still setting those background colors dynamically.

29
00:02:10,240 --> 00:02:12,700
But by default, we have a color of red.

30
00:02:13,000 --> 00:02:19,280
And you can see that it's the same format as we see up here within our success.

31
00:02:19,630 --> 00:02:26,950
So if I was to take width and simply copy that in, let's refresh and you can see that the width of

32
00:02:26,950 --> 00:02:28,300
two hundred is added in.

33
00:02:28,690 --> 00:02:33,880
If I wanted to add in height and make sure that you're adding in that semicolon there.

34
00:02:34,840 --> 00:02:37,320
So if we wanted to add in a height of one hundred.

35
00:02:37,600 --> 00:02:41,340
So now when I refresh it and you can see that the height is one hundred.

36
00:02:41,560 --> 00:02:46,780
So even if I refresh and if I go to inspect, I'm already adding in the color red.

37
00:02:46,930 --> 00:02:50,080
I'm adding in the width two hundred and height one hundred.

38
00:02:51,100 --> 00:02:53,740
And you can also update this to be white as well.

39
00:02:53,740 --> 00:02:54,870
So it's consistent with there.

40
00:02:55,030 --> 00:02:56,950
And then there's also text a line.

41
00:02:57,970 --> 00:03:02,830
So instead of setting these individually, which, of course, you do have a choice to as well, this

42
00:03:02,830 --> 00:03:07,900
is much more efficient doing it this way, especially if you're setting in multiple properties.

43
00:03:08,140 --> 00:03:08,800
So there we go.

44
00:03:08,800 --> 00:03:16,270
We've got our text A and as mentioned, the other option is you can set this within this type of format

45
00:03:16,600 --> 00:03:22,870
where we can simply grab the content here and added in within a string type format.

46
00:03:23,080 --> 00:03:24,580
And I'll comment this one out.

47
00:03:24,910 --> 00:03:27,730
And we do need to select our element.

48
00:03:27,940 --> 00:03:29,050
And that was output.

49
00:03:30,160 --> 00:03:32,560
So make sure we're adding in output style.

50
00:03:32,650 --> 00:03:33,790
Refresh the page.

51
00:03:33,970 --> 00:03:40,840
And as you can see, when we do inspect, all of the styling is added in within the same way into our

52
00:03:41,110 --> 00:03:42,820
element attribute.

53
00:03:43,950 --> 00:03:51,270
So either wait, go ahead and try out both and update, get rid of those that success styling and use

54
00:03:51,270 --> 00:03:57,600
JavaScript instead, get comfortable with adding in JavaScript and updating your style properties using

55
00:03:57,600 --> 00:03:58,350
JavaScript.

56
00:03:58,380 --> 00:03:59,340
Tried it for yourself.