设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 科技、建站、经验、云计算、5G、大数据,站长网!
热搜: 创业者 数据 手机
当前位置: 首页 > 创业 > 模式 > 正文

Chrome浏览器中用JS获取表格及其元素的CSS宽高

发布时间:2018-09-14 03:42 所属栏目:25 来源:站长网
导读:虽然现在表格用的很少了,但是某些写东西还是需要用到的。 今天在做F7Dialog2.0项目的时候遇到了要获取表格单元格的CSS宽高。自认为获取宽高很简单,直接写了代码获取,后来那部分代码写完后测试时才发现chrome执行结果不同,很是郁闷
虽然现在表格用的很少了,但是某些写东西还是需要用到的。

今天在做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定义了宽高的,所以没有详细研究这类方法。

(编辑:ASP站长网)

    网友评论
    推荐文章
      热点阅读