小编给大家分享一下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属性有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。