zoukankan      html  css  js  c++  java
  • style,currentStyle和getComputedStyle的区别

     

    样式表有三种方式

    内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。

    内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。

    外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。

     

    解决方案:引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式,可能是由style属性指定的!

    runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性!

    currentStyle 指 style 和 runtimeStyle 的结合! 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了(仅限IE) 如:document.getElementById("test").currentStyle.top

    要兼容FF,就得需要getComputedStyle 出马了

     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
      #p1 { 100px;height: 200px;color: #09c;}
     </style>
    </head>
     
    <body>
    <p id="p1" style="margin:10px;">HHHH</p>
    <script>
     function getStyle(obj, attr)  
    {  
     
        if(obj.currentStyle)  
        {  
           return obj.currentStyle[attr];  //只适用于IE
        }  
        else  
        {  
           return getComputedStyle(obj,false)[attr];   //只适用于FF,Chrome,Safa
        }  
    return obj.style[attr]; //本人测试在IE和FF下没有用,chrome有用
    }  
     
     window.onload=function()  
    {  
    //调用
        var oDiv=document.getElementByIdx_x('p1');  
    //alert(getStyle(oDiv,'width'));
    alert(getStyle(oDiv,'margin-left'));
    //查询了相关资料发现问题如下:
    //style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的。 
    //currentStyle可以弥补style的不足,但是只适用于IE。
    //getComputedStyle同currentStyle作用相同,但是适用于FF、opera、safari、chrome。
    //
    //注意
    //currentStyle和getComputedStyle只能用于获取页面元素的样式,不能用来设置相关值。
    //如果要设置相应值,应使用style。
     
    </script>
    </body>
    </html>
     
    二、获取css操作方法
    1.用JS修改标签的 class 属性值:document.getElementByIdx_x( "tt" ).className = "txt"; 
    2.用JS修改标签的 style 属性值:document.getElementByIdx_x( "t2" ).style.color = "red"; 
     
    原文参考http://blog.sina.com.cn/s/blog_89cd68470101i108.html
     
  • 相关阅读:
    OpenJDK源码研究笔记(十二):JDBC中的元数据,数据库元数据(DatabaseMetaData),参数元数据(ParameterMetaData),结果集元数据(ResultSetMetaDa
    Java实现 LeetCode 257 二叉树的所有路径
    Java实现 LeetCode 257 二叉树的所有路径
    Java实现 LeetCode 257 二叉树的所有路径
    Java实现 LeetCode 242 有效的字母异位词
    Java实现 LeetCode 242 有效的字母异位词
    Java实现 LeetCode 242 有效的字母异位词
    Java实现 LeetCode 241 为运算表达式设计优先级
    Java实现 LeetCode 241 为运算表达式设计优先级
    Java实现 LeetCode 241 为运算表达式设计优先级
  • 原文地址:https://www.cnblogs.com/qingqingzou-143/p/6672066.html
Copyright © 2011-2022 走看看