WEBVTT

0
00:00.720 --> 00:09.360
Now previously we briefly saw that we can manipulate the CSS style of a selected element by simply

1
00:09.420 --> 00:13.850
using the .css method from jQuery.

2
00:14.130 --> 00:22.120
So for example we can select our h1 and we can say .css, and we can add the CSS property that

3
00:22.140 --> 00:23.120
we want to change,

4
00:23.130 --> 00:24.720
so for example the color.

5
00:25.140 --> 00:28.900
And our second input is the value for that property.

6
00:28.920 --> 00:32.230
So we're going to change it to green this time.

7
00:32.230 --> 00:39.870
And now if I hit save and refresh then I can see h1 has been selected and the CSS color property has

8
00:39.870 --> 00:41.450
been changed to green.

9
00:41.450 --> 00:43.970
Now this method is really flexible.

10
00:43.980 --> 00:51.060
For example you can get the current value of the CSS property by simply having the name of the property

11
00:51.210 --> 00:54.890
in some quotation marks as a string inside the method.

12
00:54.910 --> 00:59.280
And now we can console.log the value of this.

13
00:59.280 --> 01:05.580
And when we refresh our web site you'll see that we get the rgb, the red green black value, of our 

14
01:05.580 --> 01:07.840
h1's color, which is black.

15
01:07.950 --> 01:15.420
And if we wanted something like say font size and refresh then you can see that the current h1 has a

16
01:15.420 --> 01:17.200
font size of 32.

17
01:17.460 --> 01:22.090
And we're getting that by using the .css method.

18
01:22.620 --> 01:28.470
So remember with this method that if you have a single property in it then you're getting the value

19
01:28.470 --> 01:29.080
of it.

20
01:29.250 --> 01:35.040
And if you have two properties in it then you're setting the value.

21
01:35.190 --> 01:42.840
Now as we said before, changing something that's related to the style inside our Javascript code is not

22
01:42.840 --> 01:43.530
that great.

23
01:43.530 --> 01:50.760
It feels a little bit dirty and that's because we need to separate our concerns, keep our Javascript

24
01:50.790 --> 01:58.080
code all about behavior, keep our style code all about the appearance, and keep our HTML all about

25
01:58.140 --> 01:59.400
content.

26
01:59.400 --> 02:01.020
So how can we do that?

27
02:01.230 --> 02:10.530
Well what if instead of adding our CSS by using the css method, we had a class inside our stylesheet, let's

28
02:10.530 --> 02:12.820
call it big-title,

29
02:13.140 --> 02:21.870
and this is going to have a font size of 10rem, and it's also going to have a color of yellow,

30
02:22.080 --> 02:26.770
and finally we're going to make the font family cursive.

31
02:27.000 --> 02:36.600
All right. So now that we've got this class inside our style sheet, we can use jQuery to add that class

32
02:36.960 --> 02:39.240
to our selected element.

33
02:39.420 --> 02:47.790
So we're selecting our h1, and by writing .addClass, and then inside the parentheses we’ll add

34
02:47.790 --> 02:56.010
the name of the class, which let's just remind ourselves was called big-title, big-title.

35
02:57.240 --> 03:05.470
And now if we hit save and refresh then you can see that we've added all of those awful looking CSS 

36
03:05.570 --> 03:07.170
to our h1.

37
03:07.560 --> 03:14.190
And this is a much better way of separating our behavior from our styles.

38
03:14.400 --> 03:18.430
Now just as you can add class you can also remove class.

39
03:18.510 --> 03:26.490
So now that we've added this horrendous yellow color we can select our h1 and use the .removeClass

40
03:26.550 --> 03:36.450
method to remove this big-title class from our h1, and you can see once I run that then all of

41
03:36.450 --> 03:41.880
those styles that belong to the big-title CSS rule disappear.

42
03:41.880 --> 03:50.280
Now if you wanted to add or remove multiple classes, let's say we add another one called margin-50,

43
03:50.490 --> 04:00.810
and in this one we simply add a margin of 50 pixels, hit save, and now inside our index.js, in order

44
04:01.090 --> 04:08.310
to add multiple classes, all we need to do is just to include them inside the same set of quotation marks

45
04:08.310 --> 04:10.240
but with a space in between.

46
04:10.350 --> 04:20.780
So our second class was called margin-50, and now we're selecting our h1 and we’re adding all of the classes,

47
04:20.790 --> 04:23.760
so that's big-title as well as margin-50.

48
04:24.000 --> 04:30.710
So if we hit save and refresh you can see that we're getting both classes applied to our h1.

49
04:30.780 --> 04:39.420
Now another really useful method from jQuery is we can see whether or not if our element has a particular

50
04:39.420 --> 04:45.040
class. So we can select our h1,  and then we can say .hasClass.

51
04:45.240 --> 04:50.180
And we're going to query for the margin-50 class.

52
04:50.580 --> 04:57.570
And now if we hit enter then you can see that it'll give you a true or false Boolean depending on whether

53
04:57.570 --> 05:03.710
or not the element does indeed have that class applied. Now in the next lesson we're going to look at how

54
05:03.710 --> 05:09.650
we can use jQuery to manipulate not just styles but also text.

55
05:09.680 --> 05:12.860
So for all of that and more, I'll see you on the next lesson.