获得样式属性和外联样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
#test-box{margin-bottom:10px;}
.wrap{width:200px;border:20px solid #ccc;}
.wrap2{width:180px;height:180px;border:10px solid #efefef;}
</style>
</head>
<body>
<div id="test-box">
<div class="wrap" id="wrap">
<div class="wrap2">this is test wrap</div>
</div>
</div>
<input type="button" value="获取 width 的属性值" onclick="getStyleProperty('wrap', 'width')" />
<input type="button" value="获取外联全部样式值" onclick="getFullStyle()" />
<xmp>
<style type="text/css">
#test-box{margin-bottom:10px;}
.wrap{width:200px;height:200px;border:20px solid #ccc;}
.wrap2{width:180px;height:180px;border:10px solid #efefef;}
</style>
<div id="box">
<div class="wrap" id="wrap">
<div class="wrap2">this is test wrap</div>
</div>
</div>
</xmp>
<script type="text/javascript">
function getStyleProperty(obj, property){
var ele = document.getElementById(obj),
val = '';
//console.log(ele.ownerDocument.firstChild.innerHTML);
if(ele.currentStyle){
val = ele.currentStyle[property];
} else if(ele.ownerDocument.defaultView.getComputedStyle) { //找到节点所属的document再找到其所属的window
val = ele.ownerDocument.defaultView.getComputedStyle(ele, null).getPropertyValue(property);
}
alert(val || '没有此属性值');
//return val || '没有此属性值';
}
//console.log(document.defaultView);
//alert(getStyle('wrap', 'height'));
function getFullStyle(){
var ss = document.styleSheets[0]; //获得该文档的样式表，数组元素类型是CSSStyleSheet
var rules = ss.cssRules ? ss.cssRules : ss.rules; //FF是cssRules,IE是rules。rules代表样式表中的规则,类型是CSSRule
for(var i=0; i<rules.length; i++){
var rule = rules[i];
alert(rule.selectorText + '{' + rule.style.cssText.toLowerCase() + '}'); //selectorText css选择器的名称
//return rule.selectorText + ':{' + rule.style.cssText.toLowerCase() + '}'; //selectorText css选择器的名称
}
}
//getFullStyle();
</script>
</body>
</html>

posted @ 2011-06-15 22:21 豪情阅读(1877) 评论(0) 编辑收藏举报

努力加载评论中...

刷新页面返回顶部

获得样式属性和外联样式

公告