时间戳

首页 > 解决方案 > 当元素根本没有出现在页面上时检查元素的可见性

javascript - 当元素根本没有出现在页面上时检查元素的可见性

问题描述

原谅我的天真。我是一名网络分析师，对 Javascript 不太了解。但是，我正在稳步学习（我认为）。Javascript 是一门迷人的语言。因此，以下代码块仅在用户触发验证错误时出现。

<span class="field-validation-error" data-valmsg-for="sisiconfirmemail" data-valmsg-replace="true">
   <span id="sisiconfirmemail-error" class="">The confirmation address and e-mail address must 
   match</span>
</span>

相反，如果用户未触发验证错误，则代码块如下所示：

<span class="field-validation-valid icon-ok-sign" data-valmsg-for="sisiconfirmemail" data-valmsg-replace="true"></span>

问题 1： 为什么 jQuery 方法$('#sisiconfirmemail-error').length > 0在尝试检查#sisiconfirmemail-error两个代码块的页面上是否存在元素时总是有效？为什么document.querySelector('#sisiconfirmemail-error').length > 0只适用于第一个代码块而不适用于第二个代码块？

问题 2： 是否有任何纯 Javascript 方法来检查页面上是否存在元素，这适用于代码块 1？我所有的努力都是Cannot read property 'xyz' of null 我试过的：

 1. document.querySelector('#sisiconfirmemail-error').length > 0
 2. document.querySelector('#sisiconfirmemail-error').offsetWidth > 0 &&
    document.querySelector('#sisiconfirmemail-error').offsetHeight > 0
 3. window.getComputedStyle(element).visibility === 'visible';

标签： javascript

解决方案

您不需要检查任何元素的属性，您只需检查返回的结果是否null为document.querySelector().

if(document.querySelector('.field-validation-error')){
  console.log('element exist');
}
else{
  console.log('element does not exist');
}
<span class="field-validation-error" data-valmsg-for="sisiconfirmemail" data-valmsg-replace="true">
   <span id="sisiconfirmemail-error" class="">The confirmation address and e-mail address must 
   match</span>
</span>

推荐阅读