JS获取元素样式

在操作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;
//获取节点的color
demo.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'));
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值