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样式了,但是,这依然不够完美!甚至还没有办法在实际开发中使用!

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

JavaScript获取CSS样式的问题(1),布布扣,bubuko.com

时间: 2024-10-05 23:51:58

JavaScript获取CSS样式的问题(1)的相关文章

JavaScript获取CSS样式的问题(2)

上一篇文章我们创建了一个cssObj对象,我们在里面添加了一个能力检测结果的属性和一个获取CSS样式的方法,但是这个对象和方法还不够完美! 为什么呢? 原因就是我们没有对传入参数进行合法性验证以及还没有对javascript中的保留关键字float进行处理,所以,当我们传入非法参数和查询float属性时,会发生脚本错误! 这当然是我们不想看到的! 首先,我们进行参数的合法性判断,在getCSS()方法中,接收2个参数,第一个是DOM元素对象,第二个是需要查询的CSS属性名称,我们知道,第一个参数

原生JavaScript获取css样式

访问属性:obj.attr 或者 obj['attr'] 通过js访问style属性 : document.getElementById("main").style.backgroundColor; style 只能获取元素的内联样式.因此,要获取元素的完整的样式信息,必须使用 window 对象的 getComputedStyle 方法,此方法有2个参数,第一个参数为要获取计算样式的元素,第二个参数可以是null.空字符串.伪类(如:before,:after),这两个参数 都是必需

每天一个JavaScript实例-展示设置和获取CSS样式设置

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-展示设置和获取CSS样式设置</title> <style> #date{ width:200px; background-color:l

javascript 获取元素样式的方法

javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle 1 .对于元素的内联CSS样式(<div style="color:#369">hello</div>),可以直接使用element.style.color来直接获取css属性的值: 2. 但是对于外部定义的css样式使用这种方式就无法获取了,而且IE浏览器和其他标准浏览器(Firefox,Chrome,Opera,

javascript 获取渲染样式

渲染样式获取方法: ie : domOjbect.currentStyle.xxx domOject DOM对象 xxx 可以是属性.方法.样式属性值(写法和标准有差别) 具体:http://www.jb51.net/shouce/dhtml/objects/currentStyle.html 注意点:样式获取的结果包含单位.如其中,border应写为borderStyle. currentStyle 返回反映页面所应用的样式设置的值,但可能并不反映获取值时渲染所采用的值.例如,样式值设置为 "

javascript 修改css样式

abc.css CSS code .class1     {    width:10px;    background-color: red;    } HTML code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><link rel="stylesheet" type="text/css" href

js用currentStyle和getComputedStyle获取css样式(非行间)

用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputedStyle.下面是一个小示例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/ht

js中获取css样式属性值

关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. (2)currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. (3)getComputedStyle同currentStyle作用相同,但是适用于FF.opera.safari.chrome. 注意: ① currentStyle和getComputedS

js获取css样式方法

一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: 100px;"></div> <style type="text/css"> #a{ width: 100px; height: 100px; } </style> <body> <div id="a"