Made withjQueryClip

JavaScript & jQuery Tutorial for Beginners - 6 of 9 - jQuery CSS Manipulation

T

tutor4u

Creator on the jQuery channel

Watch on YouTube ↗

87K viewsAug 26, 201214:37 runtime

Learn how to dynamically manipulate CSS styles on your web pages using jQuery. This tutorial for beginners covers essential methods for changing the appearance of HTML elements. Discover how to get and set CSS properties with the `.css` method, including using relative values…

Chapters

#jquery#clip#frontend

Key Concepts for jQuery CSS Manipulation

This document summarizes the core jQuery methods for dynamically altering the CSS of HTML elements.

Manipulating Inline Styles with `.css()`

The .css() method is used to get or set CSS properties directly on an element as inline styles.

Set a single property:

// Selects the element that triggered the event and sets its margin-left
$(this).css('margin-left', '50px');

Set multiple properties: Pass a JavaScript object with CSS property/value pairs.
```
$(this).css({
  'background-color': 'red',
  'margin-left': '+=50px'
});
```

Tip
Use Relative Values: You can increment or decrement numeric CSS values by using the += or -= syntax in the value string (e.g., '+=50px').

Adding Classes with `.addClass()`

Use .addClass() to apply one or more predefined CSS classes to an element.

Add a single class:
```
$(this).addClass('emphasis');
```
Add multiple classes: Separate the class names with a space inside the string.
```
$(this).addClass('emphasis shrink');
```

Removing Classes with `.removeClass()`

Use .removeClass() to take classes away from an element.

Remove a single class:
```
$(this).removeClass('emphasis');
```

Remove multiple classes:

$(this).removeClass('emphasis shrink');

Important
To remove all classes from an element, call the method with no arguments: $(this).removeClass();

Swapping Classes with Method Chaining

Since many jQuery methods return the jQuery object itself, you can chain them together to perform multiple actions in a single statement.

Example: Remove one class and add another in a single operation.

// Swaps the 'emphasis' class for the 'shrink' class
$(this).removeClass('emphasis').addClass('shrink');

Toggling Classes with `.toggleClass()`

The .toggleClass() method provides a convenient way to add a class if it's missing or remove it if it's present.

Toggle a single class:
```
$(this).toggleClass('emphasis');
```
Toggle multiple classes: Toggles each class in the list individually based on its presence.
```
$(this).toggleClass('emphasis shrink');
```

Note
If called with no arguments (.toggleClass()), the method will toggle all classes that are currently applied to the element.

Introduction and Setup

In this video, I'll be covering jQuery CSS manipulation. This allows us to change the CSS styles that are applied to HTML elements.

Let's start by looking at the HTML document that we'll be using. Here you can see that we have three h1 heading elements. And up here in the head section, you can see that we have styles specified for a class name shrink and a class name emphasis. But you should notice that we are currently not using these classes. You can see this by looking at the heading tags; you can see that no classes are defined for these headings.

And here is the JavaScript code that we're going to be using. And as you can see, we are using a mouse enter event for the h1 heading tag. The code that we put right here will be run whenever the user moves their mouse over an h1 heading element.

So now let's add a CSS style.

Applying a Single CSS Property with .css()

We'll start with a selector. So as usual, we type a dollar sign followed by a pair of parentheses. And we want our CSS style to be applied to the element that brought us here, so we'll use the keyword this for our selector. When we use the keyword this, we don't use quotation marks. Then type dot followed by css followed by a pair of parentheses, and then end this statement with a semicolon.

Next, we can define a CSS property inside these parentheses. I'll be putting the CSS property name inside of quotation marks, and I'm going to use the margin-left property. And then type a comma outside of the quotation marks. The value for this property goes next, and I put it in quotation marks, and I'm going to set this to 50 pixels. So now let's take a look at this in our browser.

So I'll move my mouse over these headings, and you can see that when I do that, it sets the left property to 50. We can also use relative values for our property value.

Using Relative Values for CSS Properties

A relative value lets us increment or decrement a value. So for example, instead of using 50 pixels like you see here, I'll put a plus sign followed by an equal sign right before it. And instead of setting it to 50 pixels, it will increment it by 50 pixels. So let's see what this looks like in the browser. So I'll move my mouse over the top of one of these headings, and you can see that it incremented the position by 50 pixels. And I'll do the same here. And now if I move the mouse back up again, it'll increment it by another 50 pixels. So every time the mouse moves over the top of this, it increments by an additional 50 pixels.

We can also specify multiple properties at the same time, but we need to do things a little bit differently.

Applying Multiple CSS Properties

We start by enclosing all of this in curly brackets, then we change the comma that's right here to a colon. Then to add another CSS property, we add a comma at the end of this value. I'm going to press the Enter key to put the new CSS property on a new line and then I'll enclose the property value in quotation marks, and I'm going to use background-color. And then I add a colon outside of the quotation marks and then I'll enclose the value red inside of quotation marks. And when this is the last property value you don't need to follow it with a comma.

And then to make this easier to read, I'm going to come up here right before the first property value, hit the enter key, and then align both of the property values. So now when I move my mouse over a heading element, it should increment the left margin by 50 pixels and it should change the background color to red. So let's go ahead and give this a try.

So I'll move my mouse over these headings; you can see it incremented and changed the background to red. And then here again, every time I move my mouse over it, it increments it again by 50 pixels. And now let's look at how to add a class to an element.

Adding CSS Classes with addClass()

If you recall back with our HTML code, you remember that we had a style specified up here with a class name of emphasis. So I'll show you how we can add this class to the heading elements. So let's first remove all of this code right here and then type addClass and then a pair of parentheses, and then we end this statement with a semicolon. And you might notice here that this C is capitalized.

And then we can add the class name that we want to add right here in the parenthesis, and we'll enclose this in quotation marks, and I'll add the class emphasis. And if we go back to the HTML code, then we can see that the emphasis class changes the text decoration to underlined and it changes the color to red. So let's look at this in the browser. So I'll move over the heading elements here. You can see that it turned red and it underlined it.

And we can also specify multiple classes, so our other class was named shrink. So all we need to do is add a space after emphasis and then type shrink. And if we go back to our HTML code, we can see that the shrink class changes the font size to 20 pixels. So let's try this one out. Here when I move my mouse over the heading, you can see that the font size changed to 20 pixels, as well as the color changed to red and we're still underlining it.

Now next, I'll show you how we can remove classes from an element.

Removing CSS Classes with removeClass()

But first, let's make a quick change to our HTML code. For this first heading tag, I'm going to add a class attribute and I'm going to use the class names shrink and emphasis. So I've just added both of these classes.

And here, to change this to removeClass. And then I'll delete everything inside these parentheses here. And now whenever I move my mouse over an h1 element, this will remove all of the classes. So let's look at this. So here you can see that the h1 element has a small font size, the color is red, and it's underlined. And as soon as I move my mouse over it, it removes those classes.

Now, if I didn't want to remove all of the classes, but I just wanted to remove one class, I could do that also. And the way that I do this is to specify the class name inside these parentheses. So I'm going to remove just the emphasis class, and so I enclose that in quotation marks. And now when we look at this, we can see that when I move my mouse over the top of this heading tag, that the font size didn't change because we didn't remove the shrink class, but it did remove the red color and the underlining.

And you can also remove multiple classes the same way. So if I were to add the class shrink and then followed that by a space and the second class specified is emphasis, this will remove both of these classes. So let's take a quick look at this. And now when I move my mouse over the heading tag, you can see that both of the classes were removed. Now we can also combine the addClass method and the removeClass method together.

Chaining Methods to Swap Classes

To show you this, we need to make a quick change to our HTML code. So here for the h1 class, I'm going to remove the shrink class, so the only class that we have here specified is emphasis. So back over here, we're going to use the removeClass method, and we're going to remove the class emphasis. And right after this parenthesis here, type a dot and then addClass and then a pair of parenthesis. And in the parenthesis we're going to add the class shrink.

So now when the user moves their mouse over an h1 element, it will remove the class emphasis and then it will add the class shrink. So let's look at this. So we can see that the first heading is using the emphasis class, which changes it to red and underlines it. And now when I move my mouse over it, the red color and underlining is removed, but we added the shrink class which changes the font size.

Now let's come back over here and remove all of this.

Toggling a Single Class with toggleClass()

And we can also use a method called toggleClass, and we follow this by parentheses. And toggleClass allows us to alternately add and remove a class. So if we look at our HTML code again real quick, you'll remember that for the h1 element we only have the emphasis class specified. So right here between the parentheses, I'm going to specify the emphasis class, and then like usual I enclose this in quotation marks. And now the first time that I move my mouse over the h1 element, it will remove the emphasis class. And then the next time I move my mouse over it, it'll add it back again. So let's look at this.

So I move my mouse over it and it removed the class. And then I move my mouse away from it and then on it again, and then it added the class back again. And you may recall in the HTML code we only added the emphasis class to the first heading element. The second and third heading elements did not have it. So if I were to move my mouse over the second heading element, it would then add this class to it, and the same for the third heading element. And then again when I move my mouse back over these, it'll remove them.

Advanced toggleClass() Usage

I can also use this toggleClass method with multiple classes. So I'm going to go ahead and add the shrink class here, and then I separate the class names with a space. And let's look at this one. Since the first heading element already had the emphasis class but it did not have the shrink class, then when I move my mouse over the top of this, it'll remove the emphasis class but it added the shrink class. And the second heading tag didn't have either the shrink or the emphasis class, so when I move my mouse over it, it applies both of these classes to it. And then when I move my mouse back over the top of the first heading tag, it turned off the shrink class and it turned back on the emphasis class. And then again when I move over the heading two tag, it turned both of these classes off.

So now let's come back over here and remove everything that's between these parentheses. So if we don't specify anything in between these parentheses, then when we use toggleClass, any class that's already specified for the element will be toggled. And so let's try this out. And if you recall, the only class that we have specified for the h1 element right now is the emphasis class. So when I move my mouse over this first heading element, we see that it just turns this class off. And the second and third heading elements didn't have any classes specified for them in the HTML code, so when I move my mouse over these, nothing happens. But when I move my mouse back over the first heading tag again, you can see that it toggles the emphasis class back on again.

Conclusion

Well, that concludes this video. For more information on jQuery CSS manipulation, visit jQuery.com. And you can find the sample code used in this video at littlewebhut.com. Well, thanks for watching, and please subscribe and leave a comment.