• JS小问题之——获取css值的三种方法


    最近写demo的时候一直遇到过获取css值的兼容性写法,那么我们来深究一下这个写法,如下:

    function getStyle(oElement, sName){  
        return oElement.currentStyle ? oElement.currentStyle[sName] : getComputedStyle(oElement, null)[sName];  
    }  

    JS 获取 html元素的样式有三种方式:style、getComputedStyle 和 currentStyle等。区别在于:

    (1)style 只能获取行间样式,但能设置样式。

    (2)getComputedStyle 和 currentStyle 能够获取 行间样式/非行间样式/浏览器默认样式,但存在浏览器兼容问题,且不能设置样式。

    一、element.style 获取行间样式,以及设置样式

    <!DOCTYPE HTML>  
    <html lang="zh-cn">  
    <head>  
    <meta charset="utf-8" />  
    <title>Javascript</title>  
    <style>  
    *{margin: 0;padding: 0;}  
    #box{ 100px;height: 100px;margin-left: 100px;}  
    </style>  
    </head>  
    <body>  
    <div id="box" style="background-color:#ccc;margin-top:100px;"></div>  
    <script>  
    window.onload = function(){   
        var oBox = document.getElementById('box');  
            console.log(oBox.style.width);          //结果为:100px  
        console.log(oBox.style.background); //结果:rgb(204,204,204),但ie下为空  
        console.log(oBox.style.backgroundColor); //结果:rgb(204,204,204)或#ccc  
        console.log(oBox.style.margin);     //结果为空  
        console.log(oBox.style.marginTop);  //结果:100px  
        oBox.style.height = '120px';        //设置样式  
    }  
    </script>  
    </body>  
    </html>  

    style总结:

     (1)对于复合属性(如background),假设行间设置了样式:background-color:#333,不能通过 element.style.background 来获取(见上面例子)。

    (2)css属性使用驼峰法,如 backgroundColor、marginTop等。

    (3)不同浏览器,一些 css 属性值可能会发生转换,如例子中的 background-color,标准浏览器会转换为 rgb 形式。

    二、getComputedStyle 获取css属性值

     1 <!DOCTYPE HTML>  
     2 <html lang="zh-cn">  
     3 <head>  
     4 <meta charset="utf-8" />  
     5 <title>Javascript</title>  
     6 <style>  
     7 #box{ 100px;height: 100px;margin-left: 100px;}  
     8 </style>  
     9 </head>  
    10 <body>  
    11 <div id="box" style="background-color:#ccc;margin-top:100px;"></div>  
    12 <script>  
    13 window.onload = function(){   
    14     var oBox = document.getElementById('box');  
    15     var a = getComputedStyle(oBox, null)['width']; // 100px  
    16     var b = getComputedStyle(oBox, null).getPropertyValue('backgroundColor'); //chrome为null, ie为空  
    17     var c = getComputedStyle(oBox, null)['backgroundColor'];// rgb(204,204,204)  
    18     var d = getComputedStyle(oBox,null)['padding'];// chrome为0px, ie为空  
    19     console.log(a, b, c, d);  
    20 }  
    21 </script>  
    22 </body>  
    23 </html>  

    getComputedStyle总结:

    (1)标准浏览器,ie9+以上支持 getComputedStyle。

    (2)对于复合属性:使用 getPropertyValue 获取属性值时,不能使用驼峰写法,如:例子中的 getpropertyValue('backgroundColor') 无法正确获得值,而必须写成 background-color。

    (3)另外,以下写法也正确:getComputedStyle(oBox, null)['backgroundColor']、getComputedStyle(oBox, null)['background-color'], 以及 getComputedStyle(oBox, null).backgroundColor 等。

    (4)当没有设置某个属性值时,chrome 会读取浏览器该属性的默认值,而 ie9+ 下结果为空。如例子中的 padding。

    (5)getComputedStyle 第二个参数为”伪类“,一般用不着,设置为 null 即可。

    三、IE 下 currentStyle 获取css 属性值

    还是上面的例子:

     1 <script>  
     2 window.onload = function(){   
     3     var oBox = document.getElementById('box');  
     4     var a = oBox.currentStyle['width']; // 100px  
     5     var b = oBox.currentStyle['background-color'];  // #ccc  
     6     var c = oBox.currentStyle['backgroundColor'];   // #ccc  
     7     var d = oBox.currentStyle.backgroundColor;     // #ccc  
     8     //var e = oBox.currentStyle.background-color;  错误  
     9     var e = oBox.currentStyle['padding'];       // 0px  
    10     console.log(a, b, c, d, e);  
    11 }  
    12 </script>  

    currentStyle 总结:

    (1)只在 IE 下支持(网上 opera 也支持,但未测)。

    (2)注意 ['backgroundColor']、['background-color'] 和 .backgroundColor 等写法。

    (3)未设置的属性值,currentStyle 会读取浏览器默认值,如例子中的 padding。

  • 相关阅读:
    JavaScript 正则表达式
    git常用命令
    用纯css使内容永远居在页面底部
    Oracle中随机抽取N条记录
    表数据回复到某个时候
    oracle同名存储过程被覆盖后如何恢复(转)
    mybatis+spring+mysql
    定位
    关于js的闭包和复制对象
    idea展示runDashboard的窗口
  • 原文地址:https://www.cnblogs.com/coderzzp/p/6430660.html
Copyright © 2020-2023  润新知