首先,CSS样式表引用的方式有几种呢?不假思索的也知道是三种对吧~
行间样式表 内部样式表 外部样式表
今天说的三种方法来获取元素的样式:
style getComputedStyle currentStyle
style不能获取非行内样式表内的信息;
getComputedStyle和currentStyle可以获取非行内元素样式表的内容;
getComputedStyle不兼容低版本的IE浏览器;
currentStyle不兼容标准浏览器 。
- <style>
- #p1{
- height:50px;
- width:60px;
- background:#cfcfcf;
- }
- </style>
- <script>
- window.onload = function() {
- var oBtn1 = document.getElementById('btn1');
- var oDiv1 = document.getElementById('p1');
- oBtn1.onclick = function() {
- alert(oDiv1.style.width);
- alert(oDiv1.currentStyle.width);
- alert(getComputedStyle(oDiv1).width);
- }
- }
- </script>
- <p id="p1"></p>
- <input type="button" value="点击我弹出p的宽" id="btn1"/>
在不同的浏览器试一试,你会发现弹出的东西也不太一样;
IE先警告一下,再弹两次60px;
火狐和chrome都是之弹出一次空的内容,然后直接报错了。
建立一个新的函数用来分类浏览器兼容:
- function getStyle(obj,attr){
- return
- obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj)[attr];
- }
遇到css中用“-”连接起来的属性,在js中应使用驼峰命名法来规范我们的代码。
- getStyle(oDiv1, "background-color");
- getStyle(oDiv1, "backgroundColor");
- //两者都是IE返回#cfcfcf;标准浏览器返回rgb(207, 207, 207);
- //建议写第二个
- getStyle(oDiv1, "background");
- //此处IE警告和火狐瞎了,chrome返回符符合样式:rgb(207, 207, 207) none repeat scroll 0% 0% / auto padding-box border-box
不要获取未设置的样式 : 不兼容啊
- getStyle(oDiv1,"marginTop");
- //IE返回auto;标准浏览器返回0px;
来源: https://www.2cto.com/kf/201710/691965.html