• (转)style/getComputerStyle/currentStyle


    http://www.jb51.net/article/34863.htm


    大家都知道,用document.getElementById(‘element').style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属性引用的外部样式表,就拿不到我们要的信息了。 

    DOM标准里有个全局方法getComputedStyle,可以获取到当前对象样式规则信息,如:getComputedStyle(obj,null).paddingLeft,就能获取到对象的左内边距。但是事情还没完,万恶的IE不支持此方法,它有自己的一个实现方式,那就是currentStyle,不同于全局方法getComputedStyle,它是作为DOM元素属性存在的,如:obj.currentStyle.paddingLeft,在IE中就获取到对象的左内边距了,兼容性的写法如下: 

    复制代码代码如下:

    return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft; 


    这样,就能在IE及FF中返回对象的当前样式信息了。 

    特别注意一点:如果要获取当前对象的颜色信息,IE返回的是16进制的'#ffffff',而FF返回的是rgb(255,255,255) 

    用js的style属性可以获得html标签的样式,但是不能获取非行间样式。那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputedStyle。下面是一个小示例: 

    复制代码代码如下:

    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>js用currentStyle和getComputedStyle获取css样式</title> 
    <style type="text/css"> 
    #div1{100px; height:100px; background:red;} 
    </style> 
    <script type="text/javascript"> 
    function getStyle(obj, attr) 

    if(obj.currentStyle) 

    return obj.currentStyle[attr]; 

    else 

    return getComputedStyle(obj,false)[attr]; 


    window.onload=function() 

    var oDiv=document.getElementById('div1'); 
    alert(getStyle(oDiv,'width')) 

    </script> 
    </head> 
    <body> 
    <div id="div1"></div> 
    </body> 
    </html> 
  • 相关阅读:
    CodeForces 288A Polo the Penguin and Strings (水题)
    CodeForces 289B Polo the Penguin and Matrix (数学,中位数)
    CodeForces 289A Polo the Penguin and Segments (水题)
    CodeForces 540C Ice Cave (BFS)
    网站后台模板
    雅图CAD
    mbps
    WCF学习-协议绑定
    数据库建表经验总结
    资源位置
  • 原文地址:https://www.cnblogs.com/kingofcorn/p/5575716.html
Copyright © 2020-2023  润新知