How to set css style in jquery

In front-end development, adding styles to web pages has always been an important task. Adding styles to a web page can increase the appeal of the page and improve user experience. In this process, jQuery is a powerful tool that can achieve complex effects with simple code. This article will introduce how to set CSS styles using jQuery.

1. Use jQuery to set CSS styles

The jQuery library provides us with a convenient way to set CSS styles. We can easily change the appearance of an element by accessing its CSS properties. The following are some commonly used methods for setting CSS styles:

1. Use the .css() method to set CSS properties

.css() The method can Set CSS properties for each element individually. This method accepts a CSS property name and a value as parameters to set the style. Here is an example:

$("p").css("background-color", "red");

In this code, the background color of the p element will be set to red.

2. Add a class using the .addClass() method

The .addClass() method can be used to add a CSS class on an element. This method can accept a class name as parameter to add the class to the element. Here is an example:

$("p").addClass("myClass");

In this code, the p element will add the class myClass.

3. Use the .removeClass() method to remove a class

Use the .removeClass() method to remove a CSS class on an element. This method can accept a class name as argument to remove the class from the element. Here is an example:

$("p").removeClass("myClass");

In this code, the p element will remove the class myClass.

4. Toggle classes using the .toggleClass() method

The .toggleClass() method can be used to toggle CSS classes on an element. This method will check if the element has the specified CSS class. If the element does not have a specified class, the class will be added. If the element already has the specified class, the class will be removed. Here is an example:

$("p").toggleClass("myClass");

In this code, if the class myClass does not exist in the element p, the class will be added; if myClass already exists class, the class will be deleted.

5. Use the .css() method to set multiple CSS properties

At the same time, you can use the .css() method to set an element Multiple CSS properties. Here is an example:

$("p").css({"background-color":"red", "color":"white"});

In this code, the background color of the p element will be set to red and the text color will be set to white.

2. Use jQuery to select elements

Before setting the CSS style, we need to select a specific element first. The jQuery library provides many methods to select HTML elements. Here are some commonly used selectors:

1. Element Selector

Element selector is the simplest way to select all specific elements on the page. Here are some examples:

$("p")    // 选择所有<p>元素
$("a")    // 选择所有<a>元素
$("div")  // 选择所有<div>元素<ol start="2"><li>ID Selector </li></ol>
<p>The ID selector selects a specific element based on the element's ID attribute. Here is an example: </p>
<pre class="brush:php;toolbar:false">$("#myDiv")  // 选择ID为“myDiv”的元素。

3. Class selector

The class selector selects a specific element based on the element's class attribute. Here is an example:

$(".myClass")  // 选择所有类为“myClass”的元素。

4. Attribute Selector

Attribute Selector selects elements based on their attributes. The following is an example:

$("[src]")  // 选择所有具有“src”属性的元素。

3. Examples of using jQuery to set CSS styles

This section will show some examples of jQuery setting CSS styles.

1. Select specific elements and set styles

The code below will set the text color to red for all h1 elements.

$("h1").css("color", "red");

2. Select specific elements and set multiple properties

$("h1").css({
    "color": "red",
    "background-color": "yellow"
});

In this code, all h1 elements will have text color red and The background color is yellow.

3. Add classes and change styles

First, add a ## to all h2 elements using the addClass() method #smaller Class:

$("h2").addClass("smaller");

Next, you can use the class defined in the CSS style sheet to change the text size:

.smaller {
    font-size: 12px;
}

4. Summary

In this article, we covered how to style CSS using jQuery. We discussed some common methods and selectors in jQuery such as

.css(), .addClass(), .removeClass(), .toggleClass(), element selector, ID selector, class selector and attribute selector. This article also includes some examples of jQuery styling CSS to help you better understand how to use them to style the look of your pages.