zoukankan      html  css  js  c++  java
  • JavaScript获取CSS样式的问题(1)

    刚刚来到博客园!先分享一点初级的知识吧!

      在学习javascript中,很多人对获取DOM元素的CSS样式感到很困惑,因为,对于行级样式,我们可以通过很简单的访问style属性就可以了得到,而对于<style>……</style>标签中定义的CSS样式和通过<link>载入的外部样式表,我们就无法用style属性访问得到,而且使用getAttribute()方法也无法获取到。以前在网上搜索了很久,其解决方案都不尽完美,回头通过自己查阅各种书籍,算是找到了比较完美的解决方法。

      我们可以通过访问通过计算的CSS样式对象来获取CSS样式!但是这里存在一个IE和非IE浏览器的兼容性问题(Opera和IE的行为在这里是一致的,但是Opera也支持非IE方法)。

      在IE和Opera中,currentStyle对象中存储着DOM元素通过计算后的CSS样式。

      通过计算后的样式是指元素最终在浏览器中呈现出来的样式。

      例如:有一个<p id="myp">……</p>标签,我们在外部样式表中有这样的定义:

        *{ margin:0px; padding:0px;}

        …… ……

        #myp{ margin:15px;}

        …… ……

        p{ padding:5px;}

      那么,我们通过javascript获取计算后的CSS样式应该是这样的(IE、Opera):

        var P=window.document.getElementById("myp");

        alert(P.currentStyle["margin"]);  // 15px

        alert(P.currentStyle["padding"]);  // 5px

      我们可以看出,在计算后的样式即是所有与之有作用的样式效果的叠加值,首先是一个全局定义将所有元素的内外边距全部清除,然后又通过ID选择器设置了P的外边距,然后又有一个对所有p标签的内边距定义,然而我们获得的CSS样式是这些定义的叠加值。

      在IE(也包括Opera的大部分版本),我们可以通过DOMObject.currentStyle["cssName"]来获取CSS样式。

      在非IE中,情况就复杂一些了,这些遵循W3C标准的主流浏览器中,要通过document.defaultView.getComputedStyle(DOMObject,null)["cssName"]来获取CSS样式。

      getComputedStyle()方法接收2个参数,第一个是要查询CSS样式的对象,第二个是伪元素(不是伪类,传入":hover"是不行的,但我们实际上通常不需要获取伪元素的样式,所以为null),这个方法会返回该查询对象的计算样式对象,然后访问对象中的CSS属性就可以得到CSS样式了。

      以上面的例子为例吧:

        var P=window.document.getElementById("myp");

        alert(window.document.defaultView.getComputedStyle(P,null)["margin"]);  // 15px

        alert(window.document.defaultView.getComputedStyle(P,null)["padding"]);  //5px

      如果我们要兼容这两种方法,我们首先要创建一个对象:

      var cssObj={};

      添加一个能力检测。

      var cssObj={

        _ifDefaultView:window.document.defaultView&&window.document.defaultView.getComputedStyle?true:false,

        };

      然后添加我们的getCSS方法。

      var cssObj={

        _ifDefaultView:window.document.defaultView&&window.document.defaultView.getComputedStyle?true:false,

        getCSS:(function(window){

          var document=window.document;

          if(cssObj._ifDefaultView){

            return function(DOMObj,cssName){

              return document.defaultView.getComputedStyle(DOMObj,null)["cssName"];

              };

            }else{

              return function(DOMObj,cssName){

                return DONObj.currentStyle["cssName"];

                };

              };

          })(window)

        };

      到此,我们只要调用cssObj.getCSS()方法就可以获得CSS样式了,但是,这依然不够完美!甚至还没有办法在实际开发中使用!

      由于篇幅关系,我重新再接着写一篇吧!

  • 相关阅读:
    新手第一次联系oracle的碰到的触发器不能创建的问题
    dubbo注册中心占位符无法解析问题(二)
    dubbo注册中心占位符无法解析问题(一)
    .
    Ubuntu16 安装后配置
    TiDB-----使用 TiUP cluster 在单机上模拟生产环境部署步骤
    TiDB 单机安装(在 Linux OS 上部署本地测试环境)
    WPF查找子控件和父控件方法
    Java基础相关
    C++ namespace浅析
  • 原文地址:https://www.cnblogs.com/reent/p/3841352.html
Copyright © 2011-2022 走看看