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 website you'll see that we get the rgb, the red, green, and black values, 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 50px, 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.