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 ...