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

js 获取css 样式表属性

2012-06-26 14:39 267 查看

今天看到这样两个属性 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];

};

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

标签：

相关文章推荐

新的分享

章节导航