How to modify css style with jquery

JQuery is a JavaScript library whose goal is to simplify operations such as HTML document traversal, event handling, animation, and Ajax operations. Here we will focus on how JQuery can be used to modify CSS styles.

First, let’s take a look at how JQuery gets DOM elements. JQuery provides a set of powerful selectors that make selecting DOM elements very convenient. For example, we can use the following code to get the DIV element with the ID "myDiv":

var myDiv = $("#myDiv");

Once the element is obtained, the CSS() method provided by JQuery can be used to modify the CSS style. The CSS() method allows us to specify the style that needs to be modified through key-value pairs:

// 修改字体颜色为红色
myDiv.css("color", "red");

// 修改背景颜色为蓝色
myDiv.css("background-color", "blue");

// 同时修改多种样式
myDiv.css({
    "color": "red",
    "background-color": "blue",
    "font-size": "16px"
});

In addition to directly specifying the key-value pair to modify the style, the CSS() method can also accept a function as a parameter. This function applies a style to each element and returns the corresponding style value. For example, the following code sets the background color of all A tags to their text content:

$("a").css("background-color", function() {
    return $(this).text();
});

In addition to the CSS() method, JQuery also provides many other methods to modify CSS styles. For example, the addClass() method can be used to add one or more class names, the removeClass() method can be used to remove one or more class names, and the toggleClass() method can be used to toggle the existence of a class name.

In summary, JQuery provides an extremely convenient way to modify CSS styles. Through selectors, CSS() methods, and other related methods, we can easily implement various style effects to add more beauty and interactive experience to the page.

The above is the detailed content of How to modify css style with jquery. For more information, please follow other related articles on the PHP Chinese website!