How to dynamically add css styles with jquery

In a web page, CSS style is very important. It determines the appearance and style of the page. Dynamically adding CSS styles with jQuery is a relatively common operation, which allows us to change the style effect of the page at any time as needed. This article will introduce how jQuery dynamically adds CSS styles, allowing us to control web page styles more flexibly and freely.

1. Use the .css() function to dynamically add CSS styles

There is a .css() function in jQuery that can be used to dynamically add CSS styles. The format of this function is basically the same as that in the CSS style sheet. The usage method is as follows:

$(selector).css(property,value)

Among them, selector represents the element to be selected, which can be ID, class, label, etc.; property represents the CSS attribute to be set, which can be It is any legal CSS attribute, and the value is a string; value represents the CSS attribute value to be set, which can be a number, a string, or even a function.

For example, as shown below:

//设置id为div1的元素的背景颜色为红色
$("#div1").css("background-color", "red");

After the above code is run, the background color of the element with id div1 will become red.

When dynamically adding CSS styles through the css() function, you can set multiple CSS properties, as shown below:

//设置id为div1的元素的背景颜色为红色，宽度为200px，高度为300px。
$("#div1").css({
   "background-color": "red",
   "width": "200px",
   "height": "300px"
});

2. Use the .addClass() function to dynamically add CSS classes

In CSS, we often use classes to set style rules for a set of elements. In this case, you can use the .addClass() function in jQuery to dynamically add CSS classes.

The specific usage is as follows:

$(selector).addClass(className)

Among them, selector represents the element to be selected, which can be ID, class, label, etc.; className represents the CSS class name to be added, which can be a string or Can be a string returned by a function.

For example, as shown below:

//为id为div1的元素添加名为myclass的CSS类
$("#div1").addClass("myclass");

After the above code is run, the element with the id of div1 will apply the style rules of the myclass class.

When dynamically adding CSS classes through the addClass() function, you can also dynamically combine multiple class names, as shown below:

//为id为div1的元素同时添加名为myclass和yourclass的CSS类
$("#div1").addClass("myclass yourclass");

3. Use the .css() function and variables to dynamically add CSS Style

If you need to dynamically set CSS properties or values ​​in JavaScript code, you can use variables to achieve this.

For example, as shown below:

//设置id为div1的元素的宽度为变量w的值
var w = "200px";
$("#div1").css("width", w);

In the above code, we use the variable w to set the width of the element, which allows us to change the value of the variable at any time, thereby changing the width of the element. style.

4. Summary

The above are several methods for dynamically adding CSS styles with jQuery. You can choose which method to use according to actual needs. When using, be careful to separate styles and JavaScript code as much as possible to avoid code confusion and difficulty in maintenance. At the same time, you should also pay attention to compatibility to avoid compatibility problems in some browsers.

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