JS 计算样式 - JavaScript

概述

在JavaScript中，计算样式是获取和操作HTML元素的样式属性的过程。通过计算样式，程序员可以获取或更改HTML元素的尺寸、位置、颜色、字体等样式属性。

计算样式的获取

要获取HTML元素的计算样式，可以使用以下方法之一：

1. 使用 getComputedStyle 方法

const element = document.getElementById('myElement');
const styles = getComputedStyle(element);

// 获取指定样式属性的值
const width = styles.getPropertyValue('width');
const color = styles.getPropertyValue('color');

2. 使用元素的 style 属性

const element = document.getElementById('myElement');

// 获取元素的计算样式对象
const styles = element.style;

// 获取指定样式属性的值
const width = styles.width;
const color = styles.color;

计算样式的修改

要修改HTML元素的计算样式，可以直接使用元素的 style 属性：

const element = document.getElementById('myElement');

// 修改元素的计算样式
element.style.width = '200px';
element.style.color = 'blue';

示例：修改元素样式

HTML

<div id="myElement">这是一个 div 元素</div>

JavaScript

const element = document.getElementById('myElement');

// 获取元素的计算样式对象
const styles = getComputedStyle(element);

// 输出元素的原始宽度
console.log(styles.width); // 输出: "100px"

// 修改元素的计算样式
element.style.width = '200px';
element.style.color = 'blue';

// 获取修改后的样式值
console.log(styles.width); // 输出: "200px"
console.log(styles.color); // 输出: "blue"

以上代码会输出当前元素的原始宽度，并通过修改 width 和 color 样式属性来改变元素的样式。最后再次获取样式值，以验证修改是否成功。

注意事项

• 计算样式是只读的，即使修改了元素的样式属性，通过 getComputedStyle 或 style 获取的样式值不会立即更新。要获取最新的样式值，需重新调用 getComputedStyle 方法。
• getComputedStyle 返回的样式值是一个只读的对象，不支持直接修改。要修改样式，需使用元素的 style 属性。

参考文档

• MDN Web 文档：计算样式