Chrome瀏覽器中用JS獲取表格及其元素的CSS寬高

今天在做F7Dialog2.0項目的時候遇到了要獲取表格單元格的CSS寬高。自認為獲取寬高很簡單，直接寫了代碼獲取，后來那部分代碼寫完后測試時才發現chrome執行結果不同，很是郁悶啊。

找了足足有半個小時原因，終于找到了，在chrome中獲取單元格CSS高度時出現了不同。

原因： 各瀏覽器對表格的執行結果不同

解決方法：
后來對表格的CSS參數獲取進行了具體的測試，發現對TABLE進行border-collapse:collapse;設定，對TR和TD進行display:block;設定，這時再去獲取任意元素的寬高，各瀏覽器都會是一致的，如果不這樣設置，可以說個中瀏覽器獲取結果都有差異。

我自己犯的的錯誤是TD沒有設置display:block;

具體測試代碼如下：

<style>
.muheight{ height:100px; width:200px; border-collapse:collapse;}
.muheight tr{ display:block;}
.muheight td{ display:block;}
.mutr{ height:80px; width:150px;}
.D_left_up{ height:50px; width:110px;}
</style>

<table class="muheight">
<tr class="mutr">
<td class="D_left_up"></td>
</tr>
</table>

<script>
alert(F$(".muheight").css("width"));
alert(F$(".muheight").css("height"));
alert(F$(".mutr").css("width"));
alert(F$(".mutr").css("height"));
alert(F$(".D_left_up").css("width"));
alert(F$(".D_left_up").css("height"));
</script>
注意：F$("").css("") 這只是我自己整理的一個小型框架，和Jquery寫法相同。

其他方法：
.scrollWidth獲取的結果差異化更大，當時因為我要取的單元格中都是用CSS定義了寬高的，所以沒有詳細研究這類方法。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈