在日常的 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. ubuntu 14.04 https 形式安装docker 私有库 harbor

    起始目录/root,root 登陆后,直接在该目录进行下面的命令 下载harbor 预编译包 0.4.5 准备通过域名 reg.server.com 来访问镜像库所以需要在/etc/hosts 文件中 ...

  2. Sublime Text 2的快速入门和常用技巧

    1. 安装扩展器包管理器Package Control组件 点击菜单 View -> Show Console 调出控制台或者按快捷键 “Ctrl + `”(1左边的符号,可能和QQ拼音输入法和 ...

  3. 利用Python的三元表达式解决Odoo中工资条中城镇、农村保险的问题

    Python中没有像C#中有三元表达式 A?B:C 但在python中可以通过 A if condition else B 的方式来达到同样的效果. 例如 : 1 if True else 0 输出 ...

  4. 8.0 Qweb 报表编写步骤

    8.0 采用的是Qweb报表,摒弃了7.0中的RML报表. 1.首先在xml文件中注册一个报表: <report id="qweb_test_report" model=&q ...

  5. mysqld服务器如何查看使用变量的值

    你能用这个命令得到mysqld服务器缺省缓冲区大小: shell> mysqld --help 这个命令生成一张所有mysqld选项和可配置变量的表.输出包括缺省值并且看上去象这样一些东西: P ...

  6. 双机冗余备份和负载均衡策略(Mysql Cluster入门安装配置指南)

    MySQL Cluster 是MySQL适合于分布式计算环境的高实用.高冗余版本.它采用了NDB Cluster 存储引擎,允许在1个 Cluster 中运行多个MySQL服务器.MySQL Clus ...

  7. YII 查找View的5种方式

    别名开头,路径指定view文件@app/views/site/about.php //开头,使用 app目录下面的views//site/about.php /开头,使用当前Module中的views ...

  8. eclipse安装swing插件

    最近想用java做个小应用,是那种可视化图形类的应用.因为一直比较懒,所以打算用swt拖拖拽拽.于是在就去找swt,这是以前的办法.结果发现原来最新版的eclipse自己带有一个windowbuild ...

  9. iOS segue 跳转

    场景描述: 要实现在tableViewController 的界面A里,点击一个cell ,跳转到第二个viewController的界面B .在第二个界面里做相应操作. 我的做法,利用sb,在A 里 ...

  10. [IT新应用]存储入门-文件级存储及块级别存储的选择

    http://www.techrepublic.com/blog/the-enterprise-cloud/block-level-storage-vs-file-level-storage-a-co ...