在日常的 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. Channel 笔记本项目 （门户客户端（介绍1） 和 wp7客户端）

  2. POJ 3335 Rotating Scoreboard(多边形的核)

    题目链接 我看的这里:http://www.cnblogs.com/ka200812/archive/2012/01/20/2328316.html 然后整理一下当做模版.0换成eps,会wa,应该要 ...

  3. UOJ#61. 【UR #5】怎样更有力气

    大力水手问禅师:“大师,很多事情都需要用很大力气才能完成,而我在吃了菠菜之后力气很大,于是就导致我现在非常依赖菠菜.我很讨厌我的现状,有没有办法少吃点菠菜甚至不吃菠菜却仍很有力气?” 禅师浅笑,答:“ ...

  4. CSS3选择器（二）之属性选择器

    CSS3选择器的第二部分——属性选择器.. 属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式 使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同 ...

  5. hdu 猜数字

    这题的意思是找到最大的n使得m次之内的猜测可以猜到1~n之间的任何值.这里是二分思想的逆过程,1~h个数最多猜测log2(n+1)次(n为奇数),故 n=2^m-1; #include"io ...

  6. 课堂Scrum站立会议演示

    组名:连连看 组长:张政 组员:张金生.李权.武志远 时间:2016.10.13   20:20--20:40 会议内容: 已完成的内容: 1.选定编译语言,安装软件并配置环境,完成了游戏的基本模型. ...

  7. Apache Spark技术实战之1 -- KafkaWordCount

    欢迎转载,转载请注明出处,徽沪一郎. 概要 Spark应用开发实践性非常强,很多时候可能都会将时间花费在环境的搭建和运行上,如果有一个比较好的指导将会大大的缩短应用开发流程.Spark Streami ...

  8. CentOs 6.6 安装配置 SVN

    ① 挂载光盘 mount /dev/cdrom /mnt/cdrom ② yum 安装 svn yum -y install subversion ③ 创建svn 版本库根目录 mkdir -p /w ...

  9. 理解 Python 中的 *args 和 **kwargs

    Python是支持可变参数的,最简单的方法莫过于使用默认参数,例如: def test_defargs(one, two = 2): print 'Required argument: ', one ...

  10. js之操作JSON数据

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...