关于JS得到CSS display的问题

Question

我先在外部链接CSS文件里给tr定义了display:table-row,接着给table的两行分别定义了名为"a","b"的id，但我用document.getElementById(id).style.display却得不到这两行的显示样式，在IE7和FF3.5得到都是空，我试着把样式直接写到HTML标签内，在FF里能得到display,而IE里仍然得不到值，应该怎么改代码才能让两个浏览器都得到值呢?

Answer 1

IE:
document.getElementById(id).currentStyle.display
FF:
document.defaultView.getComputedStyle(obj,null)[property]

Answer 2

<script type="text/javascript">
<!--
var CurrentStyle = function(e){
return e.currentStyle || document.defaultView.getComputedStyle(e, null);
}
alert(CurrentStyle(document.getElementById(id))['display']);
//-->
</script>

Answer 3

<table>
<tr id=a style="display:table-row;"><td></td></tr>
<tr id=b style="display:table-row;"><td></td></tr>
</table><script language="javascript">
alert(document.getElementById("a").style.display);
</script>

Answer 4

直接写到HTML标签里是能得到的。问题是IE（包括IE8）对display属性不支持table-row，所以得不到。
详见：http://www.w3schools.com/css/pr_class_display.asp

Answer 5

<script type="text/javascript">
<!--
    var CurrentStyle = function(e){
        return e.currentStyle || document.defaultView.getComputedStyle(e, null);
    }
    alert(CurrentStyle(document.getElementById(id))['display']);
//-->
</script>

Answer 6

currentStyle虽然能得到值，但它只是只读的，实用性不大。经过我的测试发现，e.style只能得到标签里定义的样式，而标签外定义的样式一律为空："",但是它却可以写入自己定义的样式：e.style.display="block";另外IE只对表单元素开放了name属性，针对这个属性IE一直有一个bug:如果某个表单元素的name属性的名称正好和你想得到的id名一样，那么它会返回这个name的值，这个问题需要引起注意。