JavaScript 通过 offsetHeight 属性检测元素是否显示 - 文章教程

JavaScript 通过 offsetHeight 属性检测元素是否显示

发布于 2018-10-05 字数 1228 浏览 1604 评论 0

一直都有一个困惑,JavaScript 代码编程是如何检测一个元素是否显示的,很天真的检测方式是如果元素是显示的(在网页中已存在或是占用了空间),通过检测这个元素的 CSS 样式值 display

var incorrectIsVisible = window.getComputedStyle(someElement, null).getPropertyValue('display'); // "inline", "inline-block", "block", etc.

注意,我不是检测他的透明度,因为在网页中,透明度为 0 即看不见的元素仍然占用了网页的空间,上面代码的问题是,你可以获取一个子元素的 CSS 样式,但是这可能不是其父元素的属性 display: none,例如如果子元素的 display 设置为 inline-block,但是父元素设置 displaynone,那么他的子元素任然不会显示出来,奇怪的是检测子元素的 offsetheight 属性的值却不是 0,如果他没有设置 displaynone 的话。

var correctIsVisible = someElement.offsetHeight; // 0 for hidden, more than 0 for displaying

如果一个元素是另一个元素的子元素,他设置 displaynone,那么他的 offsetheight 属性值就是 0,但是请记住,这里没有讨论透明度元素的显示问题,因为从技术上来说,即使设置透明度为 0,他任然会占用网页的空间。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3