在日常的 web 编程或 UI自动化脚本编写过程中，经常会遇到判断页面元素的显示状态，以对应的执行相应的操作。此文主要以 js 判断页面元素的存在状态为例，简单叙述一下 js 是如何判断元素的显示状态的，敬请小主们参阅。若有不足之处，敬请大神们不吝指正，不胜感激！

多不言述，小二上码咯。

以下为简单的 HTML 源码，如下所示：

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

         <title>JS-004-判断元素显示状态</title>

     </head>

     <body>

         <div>

             <h4 id="p1">显示/隐藏：</h4>

             <ul>

                 <li>隐藏文本：document.getElementById('p1').style.visibility='hidden'</li>

                 <li>显示文本：document.getElementById('p1').style.visibility='visible'</li>

             </ul>

             <input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />

             <input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

         </div>

         <div>

             <br><br><br><br>

             <a href="http://www.w3school.com.cn/jsref/dom_obj_style.asp" target="_blank">HTML DOM Style 对象</a>

         </div>

     </body>

 </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 的您一份参考。

最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^

JS-004-判断元素显示状态的更多相关文章

  1. AngularJS进阶(十)AngularJS改变元素显示状态

    AngularJS改变元素显示状态 前言 本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态. 控制html元素显示和隐藏有n种方法:ht ...

  2. js jquery 判断元素是否在数组内

    js jquery 判断元素是否在数组内 一,js方法 var arr = ["a", "b", "c"]; // js arr.index ...

  3. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

  4. Offline.js - 自动判断网络连接状态并提醒用户

    http://www.cnblogs.com/lhb25/p/offline-js-alert-users-when-no-internet-connectivity.html 使用 jslint/j ...

  5. js jquery 判断元素是否在数组内(转)

    一,js方法 var arr = ["a", "b", "c"]; // js arr.indexOf("c") var ...

  6. 利用JavaScript的if语句判断元素显示隐藏

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  7. 原生js如何判断元素出现在可视区

    元素出现在可视区 scorll滑动的距离>=当前元素距离浏览器最顶端的高度+当前元素自身的高度-当前可视区的高度 触底 scorll滑动的距离>=当前scroll总高度-当前可视区的高度

  8. jquery 判断元素显示或隐藏

    $().is(":hidden"); $().is(":visible");

  9. jQuery判断元素是否是隐藏的代码

    if($("#elem_id").is(":hidden")) { } 实例代码1: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC & ...

随机推荐

  1. HTML<marquee>标签

    <marquee>标签,它是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容.<marquee>标签的属性主要 ...

  2. nosql数据库比较

  3. C++ 'dynamic_cast' and Java 'instanceof' 使用对比

    在Java中,如果A是基类,B是A的派生类,那么instanceof可以用来判断一个实例对象是A还是B,相当于一个二元操作符,但与==, >, < 不同的是,它是由字母组成,是Java的保 ...

  4. Swift -- 官方文档Swift-Guides的学习笔记

    在经历的一段时间的郁闷之后,我发现感情都是虚伪的,只有代码是真实的(呸) 因为看了swift语法之后依然不会用swift,然后我非常作死的跑去看官方文档,就是xcode里自带的help>docu ...

  5. Ubuntu 下误修改用户组导致sudo命令无效

    1.手贱地修改了当前用户的权限组,导致sudo命令无法使用,且root用户的密码尚未修改,登陆不了root用户. 2.切换到recoverymode ,使用root用户登陆 3.执行mount -o ...

  6. 【iM_TFTRGB液晶模块】demo例程（版本1.02）发布

    ============================== 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:h ...

  7. windows服务器。linux服务器的集成包推荐

    我对linux不熟悉,这个有点不好意思,虽然我是做php开发的.我只是对apache+php+mysql的操作熟悉而已,但是linux的服务器配置什么的都太懂 所以我就安装了windows2008,安 ...

  8. POI格式化Cell样式

    通过一个实例演示怎样通过POI设置Excel单元格的边框.字体.颜色.大小.下划线.合并.对齐方式. Excel文件如下: Java代码   package my.excel;       impor ...

  9. DS实验题 Dijkstra算法

    参考:Dijkstra算法 数据结构来到了图论这一章节,网络中的路由算法基本都和图论相关.于是在拿到DS的实验题的时候,决定看下久负盛名的Dijkstra算法. Dijkstra的经典应用是开放最短路 ...

  10. Javascript 笔记与总结（2-18）正则验证与正则匹配

    ① 判断 String 是否符合正则要求 patt.test(String); [例]表单提交: a.用户名不能为空,只能是数字及字母,6-11位 b.email 不能为空且格式正确 <!DOC ...