原生js获取css样式


字数:569 阅读时长:2分钟 阅读:85

在前端开发过程中往往需要动态的编辑、修改一个UI的样式,这必然涉及到style的获取与设置。
一般都说有图有真相,而我们程序猿当然是用demo来说明一切,下面就根据一则具体事例探讨原生js获取css样式的方法。

Image

  • 事例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
    #div1{
    width: 200px;
    background:#00f;
    border: 1px solid #000;
    }
    </style>
    </head>
    <body>
    <div id="div1" style="height:100px;"></div>
    <script>
    window.onload = function() {
    var oDiv = document.getElementById('div1');
    // div的width
    console.log(oDiv.style.width);
    // div的height
    console.log(oDiv.style.height);
    }
    </script>
    </body>
    </html>

经过浏览器运行之后,在console控制台很明显有输出。

  • 第一行是空白;
  • 第二行会输出100px

很多人不明白是怎么回事,想要获取的width怎么是空白。
原来是因为直接用oDiv.style方法只能获取元素的内联样式,对于内部样式外联样式,这种方法则不能取得。
因此要另寻出路,众所周知,IE浏览器总是别具一格,格外奇葩,所以这里还得解决兼容性问题:

  • IE浏览器:

    1
    2
    3
    var oDiv = document.getElementById('div');
    var styles = oDiv.currentStyle;
    styles.width;
  • 其他浏览器:

    1
    2
    3
    var oDiv = document.getElementById('div');
    var style = window.getComputedStyle(oDiv, null);
    styles.width;
  • 封装方法:

    1
    2
    3
    function getStyle(obj,attr){
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    }

提示:

  • 这个方法需要传两个参数,obj是将要获取样式的元素,attr则是样式的属性,如widthcolor等,调用此方法时attr必须要加上引号,不然会报错;
  • 此方法只能获取单一属性样式,像borderbackground等具有综合属性的样式,只有chrome浏览器能获取;而其他浏览器只能通过borderStyleColor这种驼峰命名单一属性来取得;
  • 如果使用的是jQuery,则不需要如此操作,可直接用$('obj').css('attr')来获取,因为JQ的底层就是用currentStyle[attr]getComputedStyle(obj)[attr]这种方法进行封装的。

参考博文:


欢迎访问:个人博客地址

本文作者: Tiven
发布时间: 2017-03-10
最后更新: 2021-12-09
本文标题: 原生js获取css样式
本文链接: https://www.tiven.cn/p/c921c1a0/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^