Learn to Manipulate jQuery CSS: Four Basic Methods

jQuery CSS methods allow developers to fetch information on CSS application on elements quickly. Additionally, you can control classes of elements by adding or removing them.

This tutorial introduces the four methods that are applied to make jQuery add style to different elements or to control styles in other ways. For example, toggleClass removes the class if the element already has it, and adds it if the specified class is not found.

Additionally, with the addClass function, developers can apply styles to elements. Learn more about all of the jQuery CSS methods by reading this tutorial.

jQuery CSS: Main Tips

• jQuery has useful methods and selectors which allow you to get information from the CSS applied to the elements. Also, use them to jQuery style elements.
• By using jQuery CSS methods, you can get and set the CSS properties of the elements inside the DOM.

Four Available Functions

There are four basic methods jQuery provides for accessing the CSS of the document:

• .addClass() adds any number of classes to the selected element.
• .removeClass() removes any number of classes from the selected element.
• .toggleClass() alternates between adding/removing classes from the selected element.
• .css() sets or return the style attribute.

Add/Remove and Toggle Class

The first jQuery CSS function is the .addClass() method. It is used to jQuery add style to elements, while .removeClass() does the exact opposite.

On the other hand, .toggleClass() alternates between adding the class and removing it each time it is applied.

Syntax for .addClass(), .removeClass() and .toggleClass() is as follows:

$(selector).addClass() | .removeClass() | .toggleClass(className)

Now, to illustrate this, we will write code for jQuery to add a CSS class and remove one. Also, we toggle a certain class on the selected element on and off each time the button is clicked:

$("button").click(() => {
    alert($("h1, h2, p").css("color"));
});

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

.css() Method

The .css() jQuery method can set or return the CSS properties and values.

Return CSS Properties

To return CSS properties using this method, you have to use simple syntax like this:

$(selector).css("propertyName")

The way this method works is by returning the value of the property you entered as one of the parameters.

Here is a basic example of how jQuery .css() can be used:

$("button").click(() => {
    alert($("h1").css("color"));
});

Set CSS Properties

Making jQuery set CSS properties and their values is not difficult either. This is the syntax you need to use:

$(selector).css("propertyName", "value")

However, it is used for setting a single property and its value. To perform this action with multiple properties, you need to follow this syntax:

$(selector).css("propertyName": "value", ["propertyName": "value"])

This way, you can make jQuery add CSS properties in any quantity, separating the property name and value pair by commas.

Look at this example to further illustrate the usage of this method. We will change the color of the text and its background:

$("div").css({
  "color": "white", 
  "background-color": "green"
});

jQuery CSS: Summary

• CSS jQuery methods allow you to retrieve information about applied CSS styles. Also, you can append new classes or remove unnecessary ones.
• You can manipulate CSS properties and values with the jQuery .css() method.