css jQuery |获取和设置 CSS 类

jQuery |获取和设置 CSS 类

原文:https://www . geesforgeks . org/jquery-get-and-set-CSS-class/

jQuery 有各种 CSS 操作方法，如下所示:

添加类():向所选元素添加一个或多个类
移除类():从所选元素中移除一个或多个类
toggleClass(): 在添加或删除选定元素的类之间切换
css(): 设置或返回样式属性
jQuery addClass() Method: The addClass is used to add more property to each selected element. It can also be used to change the property of the selected element.

语法:

html $(content).addClass(target)

示例:

```html <!DOCTYPE html>

             jQuery addClass() Method


         $(document).ready(function() {         $("button").click(function() {             $("h1, h2, p").addClass("green");             $("div").addClass("abs");         });     });

        .abs {             font-weight: bold;             font-size: xx-large;         }         .green {             color:green;         }


GFG

GeeksForGeeks

This is gfg.

This is some different text.

Add classes to elements                      ```

输出:
- 之前点击按钮:
- 点击按钮后:
- jQuery removeClass() Method: This method is used to remove a specific class attribute from different elements.
语法:

html $(content).removeClass(target)

示例:

```html <!DOCTYPE html>


             $(document).ready(function() {             $("button").click(function() {                 $("h1, h2, p").removeClass("green");             });         });

    .important {     font-weight: bold;     font-size: xx-large;     }     .green {     color:green;     }


Heading 1

GFG

welcome to GeeksForGeeks.

This is other paragraph.

Remove class from elements

                     ```

输出:
- 之前点击按钮:
- 点击按钮后:
- jQuery toggleClass() Method: This method toggles between adding or removing classes from selected elements.
语法:

html $(content).toggleClass(target)

示例:

```html <!DOCTYPE html>


             $(document).ready(function() {             $("button").click(function() {                 $("h1, h2, p").toggleClass("green");             });         });

    .green {         color:lightgreen;     }


Heading

gfg

welcome to gfg

This is other paragraph.

Toggle class

                     ```

输出:
- 之前点击按钮:
- 点击按钮后:
- jQuery css() Method: This method sets or returns one or more style properties for selected elements. Syntax:
html $(content).css(target)

示例:

```html <!DOCTYPE html>


             $(document).ready(function() {             $("button").click(function() {                 alert("Background color = "                     + $("p").css("background-color"));             });         });


This is a heading

This is a gfg.

This is a gfg.

This is a gfg.

background-color of p

                     ```

输出:
- 之前点击按钮:
- 点击按钮后: