• style、currentStyle、getComputedStyle


           在写js时常会遇到一些改变当前样式的问题,来达到改变显示效果、完成一些动画等等(如:display),但在获取时往往遇到问题(以前常用document.getElementById("xx").style[""]),因为这样只能获取内嵌属性的值,而不会获取样式表中的值,内外部样式表设置的css样式不会改变style属性的值(在标签中未写的style里包含的会取默认值)。下面先来了解一下样式的定义

    样式表的三种方式

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

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

         C、外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。

         最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。

       解决方案:引入currentStyle,runtimeStyle,getComputedStyle

          style                标准的样式!可能是由style属性指定的(style=""、class=""(style属性中一个元素)等等)! 
          runtimeStyle    运行时的样式!如果与style的属性重叠,将覆盖style的属性!
          currentStyle   指 style 和 runtimeStyle 的结合!

        通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了(仅限IE

       如:document.getElementById("test").currentStyle.top

       要兼容FF,就得需要getComputedStyle

       注意:getComputedStyle是firefox中的,

               currentStyle是ie中的.

    比如说

    <style>

         #mydiv {

                width : 300px;

         }

    </styke>

    则:

    var mydiv = document.getElementById('mydiv');

    if(mydiv.currentStyle) {

          var width = mydiv.currentStyle['width'];

          alert('ie:' + width);

    } else if(window.getComputedStyle) {

          var width = window.getComputedStyle(mydiv , null)['width'];

          alert('firefox:' + width);

    }

    另外在FF下还可以通过下面的方式获取

    document.defaultView.getComputedStyle(mydiv,null).width

    window.getComputedStyle(mydiv , null).width

  • 相关阅读:
    【MySQL】DBA必备的10款最佳MySQL GUI工具
    【MySQL】获取MySQL崩溃时的core file
    字符串经常用的
    centos 系统上如何把python升级为3
    centos6 升级安装openssh7
    多进程
    队列
    线程池,锁,事件
    thread
    进程、线程
  • 原文地址:https://www.cnblogs.com/hansu/p/3768740.html
Copyright © 2020-2023  润新知