如何使用 JavaScript 获取直接应用于元素的所有 CSS 样式？

在 Web 开发中，我们经常需要获取元素应用的 CSS 样式。本文将介绍如何使用 JavaScript 获取直接应用于元素的所有 CSS 样式。

方法一：使用 window.getComputedStyle()

我们可以使用 window.getComputedStyle() 方法获取元素的所有 CSS 样式。这个方法会返回一个对象，包含了所有应用于元素的样式。

示例代码：

const element = document.getElementById('my-element'); // 获取元素
const styles = window.getComputedStyle(element); // 获取元素的样式
console.log(styles); // 输出所有样式

返回示例：

{
  alignContent: "",
  alignItems: "",
  alignSelf: "",
  alignmentBaseline: "",
  all: "",
  animation: "",
  animationDelay: "",
  animationDirection: "",
  animationDuration: "",
  animationFillMode: "",
  animationIterationCount: "",
  animationName: "",
  animationPlayState: "",
  animationTimingFunction: "",
  ...
}

注意：window.getComputedStyle() 方法返回的所有样式都是计算后的值，而非原始值。例如，如果 width 属性未设置，则返回的值可能是 auto。

方法二：使用元素的 style 属性

如果我们只想获取元素的样式表中定义的样式，可以使用元素的 style 属性。这个属性只能获取内联样式，不能获取外部样式表或嵌入样式表中定义的样式。

示例代码：

const element = document.getElementById('my-element'); // 获取元素
const styles = element.style; // 获取元素的内联样式
console.log(styles); // 输出内联样式

返回示例：

{
  width: "",
  height: "",
  margin: "",
  ...
}

结语

本文介绍了两种方法，用于获取元素的 CSS 样式。第一种方法使用 window.getComputedStyle() 方法，可以获取所有应用于元素的样式，而第二种方法使用元素的 style 属性，只能获取内联样式。使用这些方法，可以轻松地访问和操作元素的样式，从而进一步增强 Web 页面的交互性和视觉效果。