JS使用getComputedStyle()方法获取CSS属性值

当我们想要获取一个元素的CSS属性值时，通常会使用 window.getComputedStyle() 方法。这个方法可以获取到元素应用的CSS样式，而这些样式有可能来源于样式表、内嵌样式或直接的行内样式。在获取 CSS 属性时，我们需要注意属性名的写法。如果是驼峰命名法则（如 backgroundColor），则在获取时需要使用小写，即为 backgroundcolor。

下面是使用 getComputedStyle() 方法获取HTML元素CSS属性值的攻略：

步骤一：获取一个元素的引用

首先，我们需要使用 JavaScript 运行时引擎来获取对于想要获取的元素的引用。这可以通过许多 JavaScript 选择器来完成，最常见的是使用 document.querySelector() 方法：

const element = document.querySelector('some-selector');

步骤二：使用 getComputedStyle() 方法获取CSS属性值

有了元素的引用后，我们就可以使用 window.getComputedStyle() 方法来获取元素的CSS属性值了。该方法接收一个参数，即我们要获取引用元素的属性值的伪元素（如果不是获取伪元素属性值，则传递 null 即可）：

const styles = window.getComputedStyle(element, null);

步骤三：获取CSS属性值

最后一步是通过访问获取到的 styles 对象来获取具体的CSS属性值。这些属性值的格式通常是字符串（除非 CSS 属性本身是一个颜色值，那么它还可以由三个颜色组成的数组表示）。

例如，从下面的CSS代码中，我们可以获取一个名为 my-element 的元素的 background-color 属性值：

#my-element {
  background-color: blue;
}

这是我们可以使用 getComputedStyle() 应用这些样式并获取CSS属性值：

const element = document.querySelector('#my-element');
const styles = window.getComputedStyle(element, null);

const backgroundColor = styles.backgroundColor;
console.log(backgroundColor); // Output: 'rgb(0, 0, 255)'

在控制台，我们可以看到 backgroundColor 属性的值被返回为 rgb(0, 0, 255)。

示例说明

假设我们有一个 HTML 页面，它包含一个红色文本块和一个蓝色文本块：

<div id="red-block" style="color: red;">This is some red text.</div>
<div id="blue-block" style="color: blue;">This is some blue text.</div>

现在，让我们使用 JavaScript 和 getComputedStyled() 方法来查找 #red-block 元素的颜色属性。

const redBlock = document.querySelector('#red-block');
const computedStyles = window.getComputedStyle(redBlock);

const color = computedStyles.color;
console.log(color); // Output: 'rgb(255, 0, 0)'

在控制台，我们可以看到颜色属性的值被返回为 rgb(255, 0, 0)，表示元素的文字颜色为红色。

再来看一个例子，我们要获取一个元素的字体大小。这个元素是一个类名为 .big-font 的 <div>，其中属性 font-size 被设置为 20px：

<div class="big-font" style="font-size: 20px;">This text has a size of 20px.</div>

现在我们来查找这个元素的 font-size 属性：

const bigText = document.querySelector('.big-font');
const computedStyles = window.getComputedStyle(bigText);

const fontSize = computedStyles.fontSize;
console.log(fontSize); // Output: '20px'

在控制台，我们可以看到字体大小属性的值被返回为 20px。