JavaScript获取元素CSS计算后的样式

原文链接https://www.w3ctech.com/topic/40

我们在开发过程中，有时候需要根据元素已有样式来实现一些效果，那我们应该如何通过JavaScript来获取一个元素计算后的样式值呢？

原生JS方法

可以使用document.defaultView提供的getComputedStyle()方法。该方法接受两个参数：需要取得计算样式的元素和一个伪元素字符串（例":after"）。如果不需要伪元素信息，第二个参数为null。代码示例如下：

var idVal = document.getElementById("test");
var computedStyle = document.defaultView.getComputedStyle(idVal, null);

console.log(computedStyle.backgroundColor); 
console.log(computedStyle.width);                  
console.log(computedStyle.height);            
console.log(computedStyle.border); 

 

IE11以前的版本不支持getComputedStyle()方法，不过他提供的另外一个方法可以实现我们想要的结果，这就是：currentStyle。代码示例如下：

var idVal = document.getElementById("test");
var computedStyle = idVal.currentStyle;

alert(computedStyle.backgroundColor); 
alert(computedStyle.width);                  
alert(computedStyle.height);            
alert(computedStyle.border); 

jQuery获取计算样式的方法

#("#id").css("width");

注意：IE没有返回border的值为空。

还需要注意的事，不管在什么浏览器中，获取到的计算的样式都是只读的；不能修改计算后样式对象中的CSS属性。此外，计算后的样式也包含属于浏览器内部样式表的样式信息，因此任何具有默认值的CSS属性都会表现在计算后的样式中。CSS属性的默认值在不同浏览器中可能是不同的。如果你需要元素具有某个特定的默认值，应该手工在样式表中指定该值。