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

时间:2022-06-18 18:49:14

原文链接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属性的默认值在不同浏览器中可能是不同的。如果你需要元素具有某个特定的默认值,应该手工在样式表中指定该值。