JS获取元素样式

来源：互联网发布：移动数据被禁用怎么开编辑：程序博客网时间：2024/05/23 18:31

在操作DOM元素，我们经常用JS来获取元素的css样式，常见方法总结如下：

1. ele.style

这个方法只能获取写在html标签中的style属性的值，即内嵌样式值，而无法获取定义在<style type="text/css">里面的属性
例如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>js获取元素样式值</title>    <style type="text/css">        .box{            font-size: 16px;            color: gray;        }    </style></head><body>    <div class="box" style="height:50px;background-color: pink;width: 120px;">JS获取元素样式</div>    <script type="text/javascript">        var box = document.getElementsByClassName('box')[0];        console.log(box.style.height);//输出50px        alert(box.style.color);//空白        console.log(box.style.fontSize);//空白    </script></body></html>

2.getComputedStyle()

getComputedStyle可以获取当前元素所有最终使用的所有CSS属性值
语法格式：window.getComputedStyle("元素","伪类");
该方法接收两个参数：要取得计算样式的元素和一个伪类字符串（’例如:before’）。如果不需要伪元素信息，第二个参数可以是null。也可以使用document.defaultView.getComputedStyle("元素","伪类");
例如：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>js获取元素样式值</title>    <style type="text/css">        .box{            font-size: 16px;            color: gray;        }    </style></head><body>    <div class="box" style="height:50px;background-color: pink;width: 120px;">JS获取元素样式</div>    <script type="text/javascript">        var box = document.getElementsByClassName('box')[0];        var computedStyle = document.defaultView.getComputedStyle(box,null);        console.log(typeof computedStyle);//Object返回一个cssStyleDeclaration对象        console.log(computedStyle.color);//rgb(128,128,128)        console.log(computedStyle.width);//120px    </script></body></html>

注意：Firefox和Safari会将颜色转换成rgb格式，如果text节点上没有任何样式，通过style.length来查看浏览器默认样式的个数。对于IE-8，不支持以上这种方法，这时我们需要使用下面这种方法：

3.ele.currentStyle

currentStyle是IE浏览器自己的一个属性，其语法与ele.style相似，差别在于element.currentStyle返回的是元素当前应用的最终CSS属性值（包括外联CSS文件，文件中嵌入的style样式）
语法：
var style = dom.currentStyle;
例子：

var test document.getElementById("test");demo = test.currentStyle;//获取节点的colordemo.color;

注意：对于综合属性,如：border，IE 返回undefine，其他浏览器有的有返回值，有的不反悔，但是对于具体某一边的borderLeftWidth这样的属性是有返回值的。

4.getPropertyValue()

getPropertyValue()获取CSS样式的直接属性名称
语法：

window.getComputedStylle(element,null).getPropertyValue(属性);//属性不支持驼峰写法

例子：

 <style>        div{            color:pink;            text-align: center;            border: 1px solid red;        }    </style>    <script>        window.onload = function(){           var test = document.getElementsByTagName('div')[0];           var all = window.getComputedStyle(test,null);           console.log(all);           var demo1 = window.getComputedStyle(test,null).getPropertyValue("border");           var demo2 = window.getComputedStyle(test,null).getPropertyValue("color");           alert(demo1);// 1px solid rgb(255,0,0)           alert(demo2);//rgb(255,192,203)        }    </script></head><body>    <div style="width: 500px;height: 300px;">小胡</div></body></html>

注意：
1.属性名不支持驼峰格式，即获取background-color的值就用原来的格式，不需要改成驼峰格式
2.IE6-8不支持该方法

总结：W3c的getPropertyValue和IE的currentStyle的相同点与区别

currentStyle方法是IE对象专属，代表了在全局中样式表，内嵌样式和HTML标签属性中指定对象格式和样式。IE通过它，就可以获取元素的CSS样式值。

针对于其他浏览器，W3C也也提供了一个方法getPropertyValue，此方法，首先要通过document.defaultView.getComputedStyle获得CSS的样式对象，然后通过该对象的getPropertyValue来获取属性值。
不同点是：IE方法是通过CSS属性的驼峰式命名（如textAlign）来获取，而W3C的方法是通过元素CSS原来的属性名（’text-align’）获取

解决浏览器兼容问题

针对不同浏览器获取的元素方法不同的问题，可以用以下方法来解决：

1.利用try catch(e)解决兼容问题

curEle: 获取样式的元素

attr: 获取样式的属性

注意：对于非IE浏览器，不使用驼峰格式需要做处理：
attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();

 window.onload = function(){            var box = document.getElementsByTagName('div')[0];           function getCss(curEle,attr) {               var val = null;               attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();               try{                   val = window.getComputedStyle(curEle,null)[attr];               }catch(e){                   val = curEle.currentStyle[attr];               }               return val;           }          console.log(getCss(box,'backgroundColor'));        }

2.通过判断是否有getComputedStyle属性来解决兼容问题，性能比try catch好

 function getCss(curEle,attr){                attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();                var val = null;                if("getComputedStyle" in window){                    val = window.getComputedStyle(curEle,null)[attr];                }else{                    val = curEle.currentStyle[attr];                }                return val;            }            console.log(getCss(box,'background-color'));//rgb(135,206,235)

3.通过检测浏览器的版本和类型来

window.navigatoor.userAgent获取浏览器信息

获取当前浏览器是IE6—8

 function getCss(curEle,attr){                attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();                var val = null;                if(/MSIE(6|7|8)/.test(navigator.userAgent)){                    val = curEle.currentStyle[attr];                }else{                    val = window.getComputedStyle(curEle,null)[attr];                }                return val;            }            console.log(getCss(box,'background-color'));//rgb(135,206,235)

对方法进行优化

只有符合‘数字+单位、数字’才可以使用parseFloat

 function getCss(curEle,attr){                attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase();                var val = null;                var reg = null;                if("getComputedStyle" in window){                    val = window.getComputedStyle(curEle,null)[attr];                }else{                    val = curEle.currentStyle[attr];                }                reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;                return reg.test(val)?parseFloat(val):val;            }            console.log(getCss(box,'width'));

阅读全文

0 0