Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Jquery 3
  • Overview
  • Transcript

3.2 Manipulating Style

Changing an element's style is a great way to add interactivity to a web app. In this lesson, I'll show you how jQuery gives us several methods for doing just that.

3.2 Manipulating Style

Manipulating the style of an element or elements is something that we do on a regular basis and JQuery gives us a variety of methods for doing just that. Now one of those methods you have already been introduced to. It was either in the second or third lesson that that you briefly saw the CSS method. So let's start there. Now I have already selected the elements that we are going to be working with in this lesson. We have three P elements the first has an idea first and we have selected that one. And we have also selected all of the P elements and stored that inside of paragraphs. And as far CSS is concerned, we have some styling for the body that's just for the text so that we can see that a little better. And then we have a couple of classes that we are going to be applying to some of the elements. So let's start with the CSS method. We're going to do so with the first object. So we'll call CSS. And if you'll remember we can use the CSS method to set an individual property. So the first argument is color and then the second is the value for that property so blue. Whenever we say this we're going to see that the first paragraph now has a foreground color of blue. And we can do the same thing to change the background color except that our property name is going to be background color. And let's set this to yellow. Whenever we save it, there we have our blue text on yellow background. Now, here's one of the things about the property names. You can use the CSS styling, or you can use the Java script styling. Either way you're going to get the same results. So there is that. Now if you plan on changing multiple properties on the same object at the same time, there's a better way to do that, because this is rather inefficient. We're calling the CSS method twice. So instead we can call the CSS method once and then pass in an object that has all of the style information that we want to change. So that looks like this, we call CSS, we pass an object, the first property is going to be color, that's our CSS property, and then the value for that property. And then for our background color. Now because this is a JavaScript object, we have to use the JavaScript naming style here. So it's camel cased and the value is yellow. But whenever we save this, we're going to see the same results on the right hand side of the screen. Now we can also use JSON style syntax where the property name is more like a key. It's a string. And in this case we can use either the JavaScript style or we can use the CSS style. Either way we're going to get the same result as well. So if you need to change one CSS property. You can do so if you need to change multiple CSS properties you can do so as well. And here's the really nice thing about this. Let's change the styling on all of the elements. So we're going to use the paragraphs object, we're going to save this and this is going to change the style on all of the paragraphs. So if you need to apply a different style to all of the elements within the document, you can do so very very easily. Now let's change this back to first. And let's get some styling information. We're going to use our first object once again, but we're going to get the color of it. So we will say var color = first .css. And here we are only going to pass one argument, and that is the CSS property that we want to get the value of. And let's go ahead and alert this so that we can see what that value is whenever we save. We see that it is rgb(0, 0, 255). That is blue. So the CSS method can be used to set and it can also be used to get. But let's look at this. Now we know that the first paragraph has a different styling than the others. But let's use our paragraphs object here and then let's run it again and we see that the color is once again blue. Well here's the thing whenever you get the value of a CSS, and really whenever you get the value of anything using JQuery it's going to get the first element in that JQuery object. So, paragraphs has three paragraph elements inside of it. And the first one in the JQuery object Is the first one in the document. So it is getting that P element. It's getting its color value and returning it. It doesn't care about any of the other P elements. It's just getting the first one. Now if we need to work with those values then we have to to iterate over our JQuery object and we're not going to do that in this lesson but we will in the next one. So just for now know that whenever you get the value of anything using jQuery and if you're If your jQuery object has multiple elements, it's just going to get the value of that first element. Okay, so let's go back and talk about style. Now if you want to set multiple CSS properties at the same time. Yes you can use the CSS method. But it's much more efficient to just set a class on that element. So JQuery gives us several methods for working with classes within our documents. So let's start fresh. We have our paragraph elements without any style and let's start by applying the one class to our first paragraph. So we're going to save first, and the method is called addclass. And then we pass on the class that we wants to add. One in this case. And whenever we save this, we say that class is applied to the first paragraph. Now if you can add a class, then it goes without saying that you can remove a class and we have a method for removing a class. And you simply pass in the class that you want to remove and that will remove the class. Now these classes can be used on any JQuery object. So if we use this on paragraphs and we call addClass and we pass one, then it's going to apply the one class to each of the paragraphs that we selected. So once again, if you need to apply one or multiple classes to a set of elements, JQuery makes that very easy to do. Now you can pass multiple classes, To the add class, and remove class methods. So, if you want to apply both the one, and two classes you just simply pass both of those in the same string. But you separate them. With a single space. That's just like the syntax that we would use in HTML. So we are going to add both classes to the first paragraph, but then we we remove the one class, so that all we have now is our border. But, if we wanted to remove the two class as well, we just pass two to remove class and that will remove that class. Now, there's another method that we can use called toggleClass, and it basically toggles a class on and off. So if you call toggleClass and you pass one. If the element already has the one class, then it's going to remove it. But if it doesn't have that class, then it's going to add it. So in this case it's going to add it, because we removed the one class. So, let's save this. We will see once again that our first paragraph has the blue color on a yellow background, and it also has the border. But like the other two methods we can pass two or multiple class names. And this is going to toggle those classes. So we're going to see the opposite of what we saw before. In that we no longer have our border but we do have the blue foreground color and the yellow background color. And then finally we have a method that we can use to check to see if a class has been applied to an element. It is simply called has class. So we will call has class, we specify the class that we want to check. So if we check for the class of one, then we are going to see true in our alert box, because the first paragraph does have the one class. But if we check for the class called two, that's going to be false. Because well, you know why. So JQuery makes it pretty easy to work with an element or elements style. We have the CSS method for working with individual CSS properties. And then we have the methods for working with classes. Add class, remove class, toggle class and has class.

Back to the top