JS-004-判断元素显示状态

时间：2022-01-23 23:02:43

在日常的 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>

页面展示效果，如下所示：

JS-004-判断元素显示状态

页面元素是否显示时，其对应的 css 样式如下所示：

显示：<h4 id="p1">显示/隐藏：</h4> 或者 <h4 id="p1" style="visibility: visible;">显示/隐藏：</h4>

隐藏：<h4 id="p1" style="visibility: hidden;">显示/隐藏：</h4>

通过观察，发现可以通过元素对应的 sytle.visibility 属性值进行判断，通过 js 获取上述三种情况时对应的值如下所示：

JS-004-判断元素显示状态

对比上述三种结果，可通过 js 截取字符串函数 substr(start, length) 或 substring(start, end) 获取 visibility 的值，但针对第一种情况时，此种方法不可取。因而经过考虑后，采用了 string.indexOf('string') 获取字符串位置的方法判断更加简洁方便，此方法若存在查询的字符串，则返回对应的索引；否则，返回 -1。实际验证结果如下所示：

JS-004-判断元素显示状态

亲们，可将此判断方法进行进一步的封装，方便后续的操作，提高编码效率。

至此， JS-004-判断元素显示状态 顺利完结，希望此文能够给初学 JavaScript 的您一份参考。

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

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

  1. AngularJS进阶&lpar;十&rpar;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&period;js - 自动判断网络连接状态并提醒用户

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

  5. js jquery 判断元素是否在数组内&lpar;转&rpar;

    一,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. oracle调试存储过程

    跟着楼主一起来测试存储过程吧: 1.右键要测试的存储过程 出现如下提示框 2.填写参数 3.点击开始,如下操作 over,就是这么简单 -------------------------------- ...

  2. 采用 PAT工具及CSP语言，对一个问题进行自动机 建模

    pat是新加坡国立开发的工具,需要的去官网下http://www.comp.nus.edu.sg/~pat/ ,学了一天,是个不错的自动机验证工具,感觉还不错啊. 验证一个数是否为斐波那契数且为质数 ...

  3. Apache kafka原理与特性&lpar;0&period;8V&rpar;

    前言: kafka是一个轻量级的/分布式的/具备replication能力的日志采集组件,通常被集成到应用系统中,收集"用户行为日志"等,并可以使用各种消费终端(consumer) ...

  4. struts一点心得

    action中: 设置属性并增加get,set方法,给属性赋值后 (如: private String name; public String getName() { return name; } p ...

  5. Javascript 操作select控件大全（新增、修改、删除、选中、清空、判断存在等）

    1判断select选项中 是否存在Value="paraValue"的Item 2向select选项中 加入一个Item 3从select选项中 删除一个Item 4删除selec ...

  6. Android编程之LayoutInflater的inflate方法实例

    假设你不关心其内部实现,仅仅看怎样使用的话,直接看这篇就可以. 接上篇,接下来,就用最最简单的样例来说明一下: 用两个布局文件main 和 test: 当中,main.xml文件为: <?xml ...

  7. 2&period;编写IoDemo&period;java的Java应用程序，程序完成的功能是：首先读取text&period;txt文件内容，再通过键盘输入文件的名称为iodemo&period;txt&comma;把text&period;txt的内容存入iodemo&period;txt

    package zuoye; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; ...

  8. Java 优先队列

    Java PriorityQueue 优先队列是一种重要的数据结构,其利用的是小/大顶堆来实现的. Java中提供了PriorityQueue,PriorityQueue是基于小顶堆实现的*优先队列 ...

  9. Recurrent Neural Networks&lpar;RNN&rpar; 循环神经网络初探

    1. 针对机器学习/深度神经网络“记忆能力”的讨论 0x1:数据规律的本质是能代表此类数据的通用模式 - 数据挖掘的本质是在进行模式提取 数据的本质是存储信息的介质,而模式(pattern)是信息的一 ...

  10. Java并发编程笔记之AbstractQueuedSynchronizer源码分析

    为什么要说AbstractQueuedSynchronizer呢? 因为AbstractQueuedSynchronizer是JUC并发包中锁的底层支持,AbstractQueuedSynchroni ...

相关文章