如何使用 JavaScript 为 HTML 元素动态添加样式132

简介

CSS（层叠样式表）用于定义 HTML 元素的样式，如颜色、字体和尺寸。然而，有时我们需要根据特定条件或用户交互动态地更改元素的样式。这就是 JavaScript 发挥作用的地方。JavaScript 是一种编程语言，可用于操作 HTML 元素并修改其样式。

使用 inline 样式

在 JavaScript 中，最简单的方法之一是使用 inline 样式。这是通过使用 style 属性直接在 HTML 元素上设置样式。例如，以下 JavaScript 代码将使具有 ID 为 "example" 的元素变为红色：```javascript
("example"). = "red";
```

使用 classList 对象

另一种方法是使用 classList 对象。classList 对象表示元素的类列表，我们可以使用它来添加和删除类。例如，以下 JavaScript 代码将向具有 ID 为 "example" 的元素添加 "highlight" 类：```javascript
("example").("highlight");
```
"highlight" 类可以在 CSS 中定义为具有特定的样式，例如：
```css
.highlight {
color: red;
font-weight: bold;
}
```

使用 getComputedStyle() 方法

getComputedStyle() 方法可以获取元素的当前计算样式。它返回一个包含元素所有样式属性的对象。例如，以下 JavaScript 代码将获取具有 ID 为 "example" 的元素的字体大小：```javascript
((("example")).fontSize);
```

使用 setProperty() 方法

setProperty() 方法可用于设置 CSS 规则中的单个样式属性。与 style 属性不同，setProperty() 方法允许您指定属性的名称和值，并设置浏览器特定的前缀。例如，以下 JavaScript 代码将为具有 ID 为 "example" 的元素设置 --custom-color 自定义属性的值：```javascript
("example").("--custom-color", "red");
```

使用 requestAnimationFrame() 函数

requestAnimationFrame() 函数用于在每次浏览器重绘时执行回调函数。这对于在动画或根据滚动或鼠标移动等事件平滑更新样式非常有用。例如，以下 JavaScript 代码将创建一个在鼠标移动时更改元素颜色的动画：```javascript
("mousemove", (e) => {
let color = "rgb(" + + "," + + ", 0)";
("example").("--custom-color", color);
});
```

使用 JavaScript 动态添加样式为我们提供了很大的灵活性，可以创建交互式和响应式 web 应用程序。通过使用 inline 样式、classList 对象、getComputedStyle() 方法、setProperty() 方法和 requestAnimationFrame() 函数，我们可以完全控制 HTML 元素的样式，并根据条件或用户交互对其进行修改。

2025-02-04

上一篇：用 CSS 调用 JavaScript 的技巧

下一篇：如何从 JavaScript 中获取域名