Original subtitles

Now previously we briefly saw that we can manipulate the CSS style of a selected element by simply

using the .css method from jQuery.

So for example we can select our h1 and we can say .css, and we can add the CSS property that

we want to change,

so for example the color.

And our second input is the value for that property.

So we're going to change it to green this time.

And now if I hit save and refresh then I can see h1 has been selected and the CSS color property has

been changed to green.

Now this method is really flexible.

For example you can get the current value of the CSS property by simply having the name of the property

in some quotation marks as a string inside the method.

And now we can console.log the value of this.

And when we refresh our web site you'll see that we get the rgb, the red green black value, of our

h1's color, which is black.

And if we wanted something like say font size and refresh then you can see that the current h1 has a

font size of 32.

And we're getting that by using the .css method.

So remember with this method that if you have a single property in it then you're getting the value

of it.

And if you have two properties in it then you're setting the value.

Now as we said before, changing something that's related to the style inside our Javascript code is not

that great.

It feels a little bit dirty and that's because we need to separate our concerns, keep our Javascript

code all about behavior, keep our style code all about the appearance, and keep our HTML all about

content.

So how can we do that?

Well what if instead of adding our CSS by using the css method, we had a class inside our stylesheet, let's

call it big-title,

and this is going to have a font size of 10rem, and it's also going to have a color of yellow,

and finally we're going to make the font family cursive.

All right. So now that we've got this class inside our style sheet, we can use jQuery to add that class

to our selected element.

So we're selecting our h1, and by writing .addClass, and then inside the parentheses we’ll add

the name of the class, which let's just remind ourselves was called big-title, big-title.

And now if we hit save and refresh then you can see that we've added all of those awful looking CSS

to our h1.

And this is a much better way of separating our behavior from our styles.

Now just as you can add class you can also remove class.

So now that we've added this horrendous yellow color we can select our h1 and use the .removeClass

method to remove this big-title class from our h1, and you can see once I run that then all of

those styles that belong to the big-title CSS rule disappear.

Now if you wanted to add or remove multiple classes, let's say we add another one called margin-50,

and in this one we simply add a margin of 50 pixels, hit save, and now inside our index.js, in order

to add multiple classes, all we need to do is just to include them inside the same set of quotation marks

but with a space in between.

So our second class was called margin-50, and now we're selecting our h1 and we’re adding all of the classes,

so that's big-title as well as margin-50.

So if we hit save and refresh you can see that we're getting both classes applied to our h1.

Now another really useful method from jQuery is we can see whether or not if our element has a particular

class. So we can select our h1, and then we can say .hasClass.

And we're going to query for the margin-50 class.

And now if we hit enter then you can see that it'll give you a true or false Boolean depending on whether

or not the element does indeed have that class applied. Now in the next lesson we're going to look at how

we can use jQuery to manipulate not just styles but also text.

So for all of that and more, I'll see you on the next lesson.