如何在 JS 中访问页面样式

在前端开发中，经常需要在 JavaScript 中访问页面中的样式信息。这里介绍如何在 JS 中访问页面样式的方法。

1. 通过 DOM API 获取样式信息

可以通过如下 DOM API 获取样式信息：

• element.style: 获取元素的内联样式
• getComputedStyle(element, pseudoSelector): 获取元素计算后的样式(不包括内联样式)

代码示例：

// 获取元素
const element = document.querySelector('#elementId');

// 获取元素内联样式
const inlineStyle = element.style;

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

2. 获取样式属性值

在获取样式信息之后，我们可以通过如下方法获取样式属性值：

• 使用 style.getPropertyValue(propertyName) 方法，可以获取指定样式属性的值
• 使用 style[propertyName] 属性，可以获取和设置指定样式属性的值

代码示例:

// 获取元素
const element = document.querySelector('#elementId');

// 获取 background-color 属性值
const backgroundColor = element.style.getPropertyValue('background-color');
// 或者
const backgroundColor = element.style.backgroundColor;

3. 设置样式属性值

在获取样式属性值之后，我们也可以通过如下方法设置样式属性值：

• 使用 element.style.setProperty(propertyName, value, priority) 方法，可以设置指定样式属性的值（priority 参数可选）

代码示例:

// 获取元素
const element = document.querySelector('#elementId');

// 设置 background-color 属性值
element.style.setProperty('background-color', 'red', 'important');

以上就是在 JS 中访问页面样式的方法，希望对你有所帮助！