获得样式属性和外联样式

<!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>

相关阅读:
【开发者成长】喧哗的背后：Serverless 的挑战
都在说实时数据架构，你了解多少？
谊品生鲜：放弃传统数据库架构，全站上阿里云
纯干货 | 一篇讲透如何理解数据库并发控制
作为后端开发如何设计数据库系列文章(二)设计大数据量表结构
如果千百年前有视觉AI算法，世界将会是什么样的光景呢？
淘宝万亿级海量交易订单存储在哪？
跬步千里 —— 阿里云Redis bitfield命令加速记
容器环境自建数据库、中间件一键接入阿里云 Prometheus 监控
常用Maven插件介绍（转载）

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