# 属性与样式

URL: https://caijiao.org/jquery/03-dom/02-attributes-css
Source: docs/jquery/03-dom/02-attributes-css.md
Description: 讲解如何使用 jQuery 操作元素的属性和样式，包括获取和设置属性、添加和移除 CSS 类，以及直接修改样式，帮助开发者灵活控制页面表现。

[jQuery](/jquery/) 提供方便的方法操作元素的属性和样式，使页面交互效果更加丰富。

## 操作属性

- 获取属性值
  ```js
  var href = $("a").attr("href");
  ```

* 设置属性值

  ```js
  $("a").attr("href", "https://www.example.com");
  ```

* 移除属性

  ```js
  $("img").removeAttr("alt");
  ```

## 操作样式

- 获取样式

  ```js
  var color = $("p").css("color");
  ```

- 设置单个样式

  ```js
  $("p").css("color", "red");
  ```

- 设置多个样式

  ```js
  $("p").css({
    "font-size": "18px",
    "background-color": "#eee",
  });
  ```

## 操作 CSS 类

- 添加类

  ```js
  $("div").addClass("active");
  ```

- 移除类

  ```js
  $("div").removeClass("active");
  ```

- 切换类

  ```js
  $("div").toggleClass("active");
  ```

## 示例代码

[在线代码演示](/jquery/demos/8.html)