JS-004-判断元素显示状态
在日常的 web 编程或 UI自动化脚本编写过程中,经常会遇到判断页面元素的显示状态,以对应的执行相应的操作。此文主要以 js 判断页面元素的存在状态为例,简单叙述一下 js 是如何判断元素的显示状态的,敬请小主们参阅。若有不足之处,敬请大神们不吝指正,不胜感激!
多不言述,小二上码咯。
以下为简单的 HTML 源码,如下所示:
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 4 5 <title>JS-004-判断元素显示状态</title> 6 </head> 7 8 <body> 9 <div> 10 <h4 id="p1">显示/隐藏:</h4> 11 <ul> 12 <li>隐藏文本:document.getElementById('p1').style.visibility='hidden'</li> 13 <li>显示文本:document.getElementById('p1').style.visibility='visible'</li> 14 </ul> 15 <input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" /> 16 <input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" /> 17 </div> 18 19 <div> 20 <br><br><br><br> 21 <a href="http://www.w3school.com.cn/jsref/dom_obj_style.asp" target="_blank">HTML DOM Style 对象</a> 22 </div> 23 </body> 24 </html>
页面展示效果,如下所示:
页面元素是否显示时,其对应的 css 样式如下所示:
显示:<h4 id="p1">显示/隐藏:</h4> 或者 <h4 id="p1" style="visibility: visible;">显示/隐藏:</h4>
隐藏:<h4 id="p1" style="visibility: hidden;">显示/隐藏:</h4>
通过观察,发现可以通过元素对应的 sytle.visibility 属性值进行判断,通过 js 获取上述三种情况时对应的值如下所示:
对比上述三种结果,可通过 js 截取字符串函数 substr(start, length) 或 substring(start, end) 获取 visibility 的值,但针对第一种情况时,此种方法不可取。因而经过考虑后,采用了 string.indexOf('string') 获取字符串位置的方法判断更加简洁方便,此方法若存在查询的字符串,则返回对应的索引;否则,返回 -1。实际验证结果如下所示:
亲们,可将此判断方法进行进一步的封装,方便后续的操作,提高编码效率。
至此, JS-004-判断元素显示状态 顺利完结,希望此文能够给初学 JavaScript 的您一份参考。
最后,非常感谢亲的驻足,希望此文能对亲有所帮助。热烈欢迎亲一起探讨,共同进步。非常感谢! ^_^
欢迎 【 留言 || 关注 || 打赏 】 。您的每一份心意都是对我的鼓励和支持!非常感谢!欢迎互加,相互交流学习!
作者:范丰平,本文链接:https://www.cnblogs.com/fengpingfan/p/4647006.html
Copyright @范丰平 版权所有,如需转载请标明本文原始链接出处,严禁商业用途! 我的个人博客链接地址:http://www.cnblogs.com/fengpingfan
![](https://images.cnblogs.com/cnblogs_com/fengpingfan/2153325/o_220506115434_gzgqrb.png)