JS 更改样式 - JavaScript

在网页开发中，JavaScript 可以通过操作 DOM（文档对象模型）来改变元素的样式。这种能力使得开发者可以动态地改变页面上的样式，提升用户体验和交互性。

1. 使用元素的 style 属性

每个 DOM 元素都有一个 style 属性，该属性可以让你直接访问和修改元素的内联样式。以下是一些常见的操作：

// 获取元素
const element = document.getElementById('myElement');

// 修改元素样式
element.style.color = 'red';
element.style.fontSize = '16px';
element.style.backgroundColor = 'lightblue';

通过直接修改元素的 style 属性，你可以修改元素的各种样式属性，如颜色、字体大小、背景颜色等。这些改变将立即应用于元素。

2. 使用 CSS 类

除了直接修改元素的样式属性，还可以通过添加、移除和切换 CSS 类来改变元素的样式。这种方法更加灵活，适用于需要多次改变样式的情况。

// 获取元素
const element = document.getElementById('myElement');

// 添加 CSS 类
element.classList.add('highlight');

// 移除 CSS 类
element.classList.remove('highlight');

// 切换 CSS 类
element.classList.toggle('highlight');

通过操作元素的 classList 属性，你可以添加、移除和切换 CSS 类。这些类在 CSS 中定义了相应的样式规则，可以让你轻松地改变元素的样式。

3. 修改特定样式属性

如果你只想修改元素的某个特定样式属性，可以使用 getComputedStyle 方法来获取计算后的样式值，并通过设置新值来修改。

// 获取元素
const element = document.getElementById('myElement');

// 获取计算后的样式
const computedStyle = window.getComputedStyle(element);

// 修改特定样式属性
element.style.color = computedStyle.backgroundColor;

通过 getComputedStyle 方法，你可以获取元素的计算后的样式值，包括所有应用的样式规则。你可以通过读取或设置 style 属性来修改特定的样式属性。

以上是一些使用 JavaScript 更改样式的常见方法。通过操作元素的样式，你可以实现网页上各种效果和动态交互。请注意，这些修改是即时生效的，并且可以随时更改。