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

今天在做F7Dialog2.0項(xiàng)目的時(shí)候遇到了要獲取表格單元格的CSS寬高。自認(rèn)為獲取寬高很簡單，直接寫了代碼獲取，后來那部分代碼寫完后測試時(shí)才發(fā)現(xiàn)chrome執(zhí)行結(jié)果不同，很是郁悶啊。

找了足足有半個(gè)小時(shí)原因，終于找到了，在chrome中獲取單元格CSS高度時(shí)出現(xiàn)了不同。

原因： 各瀏覽器對(duì)表格的執(zhí)行結(jié)果不同

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

我自己犯的的錯(cuò)誤是TD沒有設(shè)置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("") 這只是我自己整理的一個(gè)小型框架，和Jquery寫法相同。

其他方法：
.scrollWidth獲取的結(jié)果差異化更大，當(dāng)時(shí)因?yàn)槲乙〉膯卧裰卸际怯肅SS定義了寬高的，所以沒有詳細(xì)研究這類方法。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)