js正确获取元素样式详解

下面就为你讲解如何正确获取元素样式的完整攻略。

下面就为你讲解如何正确获取元素样式的完整攻略。

1. 使用style属性获取元素样式

普遍情况下，我们使用JavaScript获取元素样式时，最开始的想法可能是通过元素的style属性来获取。示例代码如下：

// 获取id为box的元素的背景颜色
var box = document.getElementById('box');
var bgColor = box.style.backgroundColor;
console.log(bgColor);

但是，请注意：使用style属性只能获取内嵌样式或直接在style标签中定义的样式。如果我们将背景色改为外部引入的样式，那么上述代码就会返回空字符串。因此，这种方式并不可靠。

2. 使用getComputedStyle方法获取元素样式

getComputedStyle方法是在DOM2级中引入的，IE只能在IE9及以上版本中使用。当该方法被调用时，它会返回一个CSSStyleDeclaration对象，该对象拥有所有计算后的样式信息。示例代码如下：

// 获取id为box的元素的背景颜色
var box = document.getElementById('box');
var bgColor = getComputedStyle(box).backgroundColor;
console.log(bgColor);

在上面的代码中，getComputedStyle方法返回了一个CSSStyleDeclaration对象，我们可以通过"."和样式名称来访问对应的样式值。

3. 使用currentStyle属性获取元素在IE下的样式

对于IE浏览器，我们可以使用currentStyle属性来获取元素的样式。示例代码如下：

// 获取id为box的元素的背景颜色
var box = document.getElementById('box');
var bgColor = box.currentStyle.backgroundColor;
console.log(bgColor);

在上述代码中，IE浏览器会返回computedStyle属性与getComputedStyle方法相同的CSSStyleDeclaration对象，但将computedStyle属性替换为currentStyle属性。

示例说明

示例1：针对getComputedStyle方法的示例

HTML代码：

<div id="box"></div>

CSS代码：

#box {
  width: 100px;
  height: 100px;
  background-color: red;
}

JavaScript代码：

// 获取id为box的元素的背景颜色
var box = document.getElementById('box');
var bgColor = getComputedStyle(box).backgroundColor;
console.log(bgColor);

注释：在上面的示例中，我们使用getComputedStyle方法获取了id为box的元素的背景颜色，并将其打印到控制台中。

示例2：针对currentStyle属性的示例

HTML代码：

<div id="box"></div>

CSS代码：

#box {
  width: 100px;
  height: 100px;
  background-color: red;
}

JavaScript代码：

// 获取id为box的元素的背景颜色
var box = document.getElementById('box');
var bgColor = box.currentStyle.backgroundColor;
console.log(bgColor);

注释：在上面的示例中，我们使用currentStyle属性获取了id为box的元素的背景颜色，并将其打印到控制台中。

以上就是关于如何正确获取元素样式的完整攻略，希望对你有所帮助。