如何在 JavaScript 中获取元素的 class249


在 JavaScript 中,获取元素的 class 属性是一个常见操作,可以用于检查元素的样式和应用条件样式。本文将介绍几种获取 class 属性的方法,包括使用 className、getAttribute() 和 classList。## 使用 className

className 属性是 HTML 元素的一个内置属性,返回该元素的 class 属性值。它是一个字符串,包含元素的所有 class 名称,以空格分隔。```javascript
const element = ("myElement");
const classList = ;
```
## 使用 getAttribute()

getAttribute() 方法可用于获取特定属性的值,包括 class 属性。它需要一个字符串参数,该参数指定要获取的属性名称。```javascript
const element = ("myElement");
const classList = ("class");
```
## 使用 classList

classList 属性是 HTML 元素的一个内置属性,返回一个包含元素 class 名称的 DOMTokenList 对象。这是一个动态列表,可用于添加、删除和切换 class 名称。```javascript
const element = ("myElement");
const classList = ;
```
## 比较三种方法

以下表格比较了三种获取 class 属性值的方法:| 方法 | 返回类型 | 可修改 |
|---|---|---|
| className | 字符串 | 否 |
| getAttribute() | 字符串 | 否 |
| classList | DOMTokenList 对象 | 是 |
## 使用示例

以下是一些使用三种方法获取 class 属性值的示例:```javascript
// 使用 className 获取 class 属性值
const element = ("myElement");
const classList = ;
(classList); // "class1 class2"
// 使用 getAttribute() 获取 class 属性值
const classList = ("class");
(classList); // "class1 class2"
// 使用 classList 获取 class 属性值
const classList = ;
(classList); // DOMTokenList(...)
// 添加一个 class 名称
("new-class");
// 删除一个 class 名称
("class1");
// 替换一个 class 名称
("class2", "new-class2");
```

2025-02-03


上一篇:JavaScript 滑动事件:详解和示例

下一篇:JavaScript 正则表达式 test() 方法详解