以前都是用jquery获取，后来写了个组件遇到这个问题，才发现这里面大有文章！
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取dom外链样式</title>
<style>
.div{font:14px/22px arial;color:#666;border:10px solid #ddd;}
</style>
</head>
<body>
<div id="div" class="div" style="background:#f2f2f2;"></div>
<script>
var doc = document,
div = doc.getElementById(‘div‘);
function getCurrentStyle(node) {
var style = null;
if(window.getComputedStyle) {
style = window.getComputedStyle(node, null);
//chrome、firefox、ie9(含)+
console.log(‘globalEventContext‘);
}else{
style = node.currentStyle;
//ie7、ie8
console.log(‘currentStyel‘);
}
return style;
}
console.log(getCurrentStyle(div).borderLeftWidth); //10px
console.log(getCurrentStyle(div).backgroundColor); //rgb(242, 242, 242)
</script>
</body>
</html>
getCurrentStyle方法会返回dom的所有样式集合，试着输出了一下这个集合（想要什么样式值可以按实际输出的键值取），发现在不同浏览器下有些细微差别，比如没给dom设置border：
ie7
谷歌：
所以有时候取出来的值还是要做些处理，比如要获得元素的边框宽度，就需要针对浏览器差异处理下getCurrentStyle[dom].borderTopWidth的值
时间： 2024-10-22 18:52:18