对于这个问题IE和W3C一如既往的给出了不同的实现，下面给出兼容性代码。
此代码仅测试用，并没有添加获取具体属性的功能，而是直接将所有属性生成了一个table字符串作为函数的返回值。
如果需要，请自行添加修改。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript获取和修改元素样式表</title>
<style type="text/css">
#test {
width: 100px;
height: 75px;
border: 1px solid #CCC;
}
table td {
border: 1px solid #CCC;
}
</style>
<script type="text/javascript">
// 获取元素样式信息的兼容性代码
function getStyle(node){
// 样式信息表
var cssTable = '<table cellspacing=13><tr><td>node_id</td>';
// 样式数组
var styleArray;
// for IE
if(document.all){
// IE下CSS样式存放于DOM结点元素的currentStyle对象数组中
styleArray = node.currentStyle;
for(var attribute in styleArray){
cssTable += '<td>' + attribute + '</td>';
}
cssTable += '</tr>';
cssTable += '<tr><td>' + node.id + '</td>';
for(var attribute in styleArray){
cssTable += '<td>' + styleArray[attribute] + '</td>';
}
}
// for W3C
else{
// W3C下CSS样式存放于window.getComputedStyle方法返回的数组中
styleArray = window.getComputedStyle(node,null);
for(var i=0; i<styleArray.length; i++){
cssTable += '<td>' + styleArray + '</td>';
}
cssTable += '</tr>';
cssTable += '<tr><td>' + node.id + '</td>';
for(var i=0; i<styleArray.length; i++){
cssTable += '<td>' + styleArray[styleArray] + '</td>';
}
}
cssTable += '</tr></table>';
return cssTable;
}
// 测试执行
function test(){
document.body.innerHTML += getStyle(document.getElementById('test'));
}
// 绑定到onload
window.onload = test;
</script>
</head>
<body>
<!-- 测试用div -->
<div id="test">
</div>
</body>
</html>
原创帖，转载请注明来源，谢谢。
最新评论