js 获取css
样式表属性
2012-04-15 18:23:55| 分类: JS|举报|字号 订阅
今天看到这样两个属性 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>
<!-- <style
type="text/css">
</style>-->
<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];
};