javascript - JS获取页面可视化元素
迷茫
迷茫 2017-04-10 14:27:33
[JavaScript讨论组]

现在想通过JS获取页面上看得见的元素(可视化元素)。

初步做法是遍历页面所有节点,根据一定条件判断元素是否为可视化元素。

我的想法有两个:

  1. 通过一定条件筛选可视化元素

  2. 通过一定条件剔除非可视化元素

其实两者差别可能不会太大,判断条件也会存在一些交集,我先说说两者区别:

第一种入手比较困难(我现在能想到的就是枚举可视化元素,再判断它们的一些属性如display、visibility等),因为可视化元素具备的特征很多,所以整个判断条件可能会很复杂。但是优点在于,只要符合条件的元素就一定是可视化元素。

第二种和第一种其实也差别不大,但是思考起来比较好入手,首先CSS属性display为none、visibility为hidden的元素就可以剔除,script、noscript等标签也可以剔除,还有一些如input[type="hidden"]的元素,但是实际上,要做到准确筛选,也很不容易。所以它的缺点在于,筛选条件必须足够严格,否则剔除不彻底的话,筛选结果可能就会慘杂非可视化元素。

其实还有一些特殊条件,譬如说被一些元素被浮动元素全部遮挡了,那这个元素也应该被剔除。


其实个人觉得用JS获取可视化元素这个思路本身就不靠谱,如果想要对可视化元素展开业务操作的话,是可以通过动态捕捉事件的触发元素来实现的。
但是这个坑已经挖了,就想在SF上听听大家的看法。请轻喷。

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全部回复(2)
大家讲道理

如果说被遮挡的也要算成看不见的,那么答案就是做不到

我有图片本身形状任意的png图片挡一层
我有随便乱画的canvas挡在上面挡一层
我有css3 animation导致opacity一会1一会儿非1的元素。位置也可以动来动去
我可以用border来遮挡,也可以用text-shadow box-shadow 来遮挡

那么某个像素到底有没有被遮挡呢? god only knows
那么你的元素里这么多个像素是否均被遮挡呢? god only knows

至于其他情况一切好谈,去挖jQ的:visible代码就好

PHP中文网

jQuery(':visible') ?

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号