如何在 JavaScript 中获取 HTML 标签的 CSS

当我们需要获取 HTML 标签的 CSS 属性时，可以使用 JavaScript 的 getComputedStyle() 方法。该方法可以返回当前指定元素的所有计算样式，包括内嵌样式、嵌入式样式和外部样式。

以下是获取指定元素的 CSS 属性的步骤：

步骤 1：获取元素

首先，我们需要获取需要获取 CSS 属性的 HTML 元素。我们可以使用 document.querySelector() 或 document.getElementById() 方法获取元素。

const element = document.querySelector('.my-element');

步骤 2：获取计算样式

接下来，我们可以使用 getComputedStyle() 方法获取指定元素的计算样式。

const styles = window.getComputedStyle(element);

步骤 3：获取指定属性

现在，我们可以使用 styles 对象获取指定的 CSS 属性的值了。例如，要获取 color 属性的值，可以使用以下代码：

const color = styles.getPropertyValue('color');

示例代码

const element = document.querySelector('.my-element');
const styles = window.getComputedStyle(element);
const color = styles.getPropertyValue('color');

console.log(color); // 输出指定元素的 color 属性的值

需要注意的是，getComputedStyle() 方法返回的是只读的，它只能用于获取 CSS 属性值，而不能用于设置属性值。如果需要设置 CSS 属性值，请使用 style 属性。