您的位置：首页 > Web前端 > CSS

[js]js 获取css 样式表属性

2012-07-30 23:22 441 查看

原文地址:http://blog.163.com/jinwei_zhiyuan/blog/static/11582265201231561253671/

今天看到这样两个属性 currentStyle defaultView，这两个属性从字面上看，是获取css 属性的，而我之前获取css属性用的则是dom.element.style.height 类似这样的写法，今天看到上面提到的两个属性有好奇，与在网上查了一下，这个两用法是区别的：

-->dom.element.style.height 对于样式写在<style type="text/css"></style>或者.css文件里，是无效的

-->与是currentSytle、defaultView就产生了，currentStyle 是IE提供的，defaultView 则于标准浏览器提供的

实例：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>currentStyle</title>

    

    <link rel="Stylesheet" href="http://blog.163.com/jinwei_zhiyuan/blog/StyleSheet.css" type="text/css" />

</head>

<body>

    <div id="qq" class="divtitle">

        测试样式

    </div>

    <script type="text/javascript">

//document.defaultView.getComputedStyle 这是w3c标准方法，取得元素的样式信息，因为有些样式是在外部css文件定义的，所以用element.style是取不到的如果是IE,可以用 element.currentStyle["name"]

   function GetCurrentStyle (obj, prop)

   {

      if (obj.currentStyle) //IE

      {

          return obj.currentStyle[prop];

      }

      else if (window.getComputedStyle) //非IE

      {

          propprop = prop.replace (/([A-Z])/g, "-$1");

          propprop = prop.toLowerCase ();

          return document.defaultView.getComputedStyle(obj,null)[propprop];

      }

     return null;

   }

   var dd=document.getElementById("qq");

   alert(GetCurrentStyle(dd,"color"));

    </script>

</body>

</html>

外部样式：StyleSheet

.divtitle

        {

            background: blue;

            color: #cdcdcd;

            width: 200px;

        }

JS函数

view sourceprint?

var getCss = function(o,key){

    return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];

};

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css stylesheet function null ie 浏览器

相关文章推荐

新的分享

章节导航