js如何获取css属性

小编给大家分享一下js如何获取css属性，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

目前创新互联已为成百上千家的企业提供了网站建设、域名、雅安服务器托管、网站托管、服务器托管、企业网站设计、阳新网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

js获取css属性的方法：使用【getComputedStyle(div)】方法获取，代码为【var a = document.defaultView.getComputedStyle(div);】。

js获取css属性的方法：

在使用原生js做开发的时候，你应该会遇到需要获取css属性，然后发现好像直接获取是不行的。这里提供两种在原生js中获取css属性的方法

直接获取会失败，举个栗子

window.onload = function() {
var but = document.getElementById('button');
var div = document.getElementById('getStyle');
but.onclick = function() {
alert(div.style.width);//弹出空的对话框
}
}

使用getComputedStyle(div)方法

用法示例

window.onload = function() {
var but = document.getElementById('button');
var div = document.getElementById('getStyle');
but.onclick = function() {
var a = document.defaultView.getComputedStyle(div);
alert(a.width);//100px
}
}

注意事项

1. 获取到的是浏览器计算后的样式，如果你去获取background,你会得到下面结果

alert(a.background);//reb(255,0,0) none repeat sroll 0% 0% / auto padding-box border-box

所以请清楚指明你要获取的样式，像这样

alert(a.backgroundColor);//red

2. 写名字的时候不要有空格

'div'不可以是' div'

3. 不要获取未设置的样式，不兼容

解决兼容性： ie8一下版本不能使用getComputedStyle方法，而要用currenrStyle方法

a = div.currentStyle;
alert(a.width);

看完了这篇文章，相信你对js如何获取css属性有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！