w3ctech

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

我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过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属性的默认值在不同浏览器中可能是不同的。如果你需要元素具有某个特定的默认值,应该手工在样式表中指定该值。

前端圈微信

扫码关注前端圈微信公众号

共收到1条回复

  • 想想,都说web前端门槛很低,熟不知?前端技术的较其他语言技术发展的速度快,不要指望你懂的css、html、js,就能成为一名合格的前端工程人员,像国内顶级的前端公司切图网(www.qietu.com),和电信、路虎、雪佛兰、多美滋等公司合作的项目上千例中,多数都应用到了html5,而html5,11年末时,大家用不用html5感到迟疑,没想到过几年,也就现在2015年,html5火爆不得了

    回复此楼