zoukankan      html  css  js  c++  java
  • 获取非行间样式getComputedStyle

    有如下代码:

    1
    2
    3
    div {
        width200px;
    }

      

    1
    2
    3
    <div id="aa" style="height: 100px;">
        xxxx
    </div>

      

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var div = document.getElementById("aa");
     
    var h = div.style.height;
     
    var w = div.style.width;
     
    console.log(h); //100px
     
    console.log(w); //这个结果为空

      

    因为这种方法只能获取dom元素的行内样式,当这个div的宽度是在css中设置的,用这种方法得到的就是空值。

    有两种方法可以解决这个问题。

    1.window.getComputedStyle(obj,false)['attr']方法

    这是BOM(浏览器window对象)提供的方法 ,所以可以直接写成getComputedStyle(nodeObj,false),省略前面的window对象,该方法有两个参数,第一个是要获取样式的节点对象;第二个可以写成任何的字符一般写成false或者null,这里最好是用false因为用null IE9+会有问题;后面直接跟要获取的样式(写在方括号中)即可。这个方法的返回值为一个对象,为计算后的样式的属性值对的集合。比如要获取某个div宽度。那么可以直接写成 var style=getComputedStyle(div,false)['width']; alert(style);

    1
    2
    3
    4
    5
    var div = document.getElementById("aa");
     
    var w = getComputedStyle(div,false)["width"]
     
    console.log(w); //200px

      但是IE8 以下是不支持window.getComputedStyle(obj,false)['attr']方法

    2.nodeObj.currentStyle['attr'];

    node.currentStyle,该属性返回的也是是一个对象,也是计算后的样式的属性值对的集合。比如要获取某个div宽度。那么可以直接写成 

    var style=div.currentStyle['width']; alert(style);

    1
    2
    3
    4
    5
    var div = document.getElementById("aa");
     
    var w = div.currentStyle["width"];
     
    console.log(w); //200px

      这个方法在谷歌浏览器报错,但是在ie浏览器可以打印出结果;

    综上所述,我们可以写一个方法来获取非行间样式:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var div = document.getElementById("aa");
     
    var w = getAttr(div, "width");
     
    console.log(w);
     
    function getAttr(obj, attr) {
        var style;
        if(window.getComputedStyle) {
            style = getComputedStyle(obj, false)[attr]; //主流浏览器
        else {
            style = obj.currentStyle[attr]; //兼容IE
        }
        return style;
    }

      

  • 相关阅读:
    NET基础课--NET的一些概念0
    项目异常及处理方法记录
    个人总结
    NuGet学习笔记(4)—— 实践
    NuGet学习笔记(3)——搭建属于自己的NuGet服务器(转)
    NuGet学习笔记(2)——使用图形化界面打包自己的类库(转)
    NuGet学习笔记(1)——初识NuGet及快速安装使用(转)
    关系数据库SQL之基本数据查询:子查询、分组查询、模糊查询
    <iOS>UIImage变为NSData并进行压缩
    iOS 将NSArray、NSDictionary转换为JSON格式进行网络传输
  • 原文地址:https://www.cnblogs.com/libin-1/p/6533793.html
Copyright © 2011-2022 走看看