JS获取元素样式

最新推荐文章于 2024-05-16 10:03:01 发布

胡鹤婷

最新推荐文章于 2024-05-16 10:03:01 发布

阅读量2.5k

点赞数 2

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/hhthwx/article/details/78452047

版权

js 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

在操作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'));