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
     
  • 相关阅读:
    字符串Hash 学习笔记
    P4315 月下“毛景树” 题解
    page
    Equation
    Graph
    配置UOJ数据的正确姿势
    luogu2261余数求和题解--整除分块
    luogu2858奶牛零食题解--区间DP
    luogu1005矩阵取数游戏题解--区间DP
    luogu4677山区建小学题解--区间DP
  • 原文地址:https://www.cnblogs.com/qingqingzou-143/p/6672066.html
Copyright © 2011-2022 走看看