获得样式属性和外联样式

<!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{200px;border:20px solid #ccc;}
.wrap2{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{200px;height:200px;border:20px solid #ccc;}
.wrap2{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>

相关阅读:
（转）Python格式化字符 %s %d %f
(转) Linux Shell经典实例解析
(转)用shell脚本实现杨辉三角的4个实例！
(转)[Shell]tr命令详解
(转)linux shell单引号、双引号及无引号区别
(转)Linux基础------Shell数值计算的几种方法
(转)Shell中获取字符串长度的七种方法
(转)source、sh、bash、./执行脚本的区别
session和cookie的联系
javascript中的cookie

原文地址：https://www.cnblogs.com/jikey/p/2082171.html