加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 正文

Chrome赏识器顶用JS获取表格及其元素的CSS宽高

发布时间:2018-09-14 12:01:22 所属栏目:创业 来源:站长网
导读:固然此刻表格用的很少了,可是某些写对象照旧必要用到的。 本日在做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界说了宽高的,以是没有具体研究这类要领。

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读