html – 检测元素是否可见(不使用jquery)

我正在尝试检测是否可以看到或不使用 jquery可以看到一个HTML元素.

上下文：

在忘记的用户密码页面中,我有一个表单,用户输入他的登录名,点击提交.之后,如果他设定了一个挑战性的问题,就会显示出来,他将能够回答这个问题并再次提交. (相同的按钮之前).

我的问题：

当用户点击提交时,在IE中,如果他点击了几次,他每次点击时都会收到一封电子邮件.

我想：

我想在点击此提交按钮后禁用该按钮,但是如果两个条件正确,我只能禁用它：

>如果用户已经提交了他的登录名(没有错误).
用户有注册的挑战性问题,他的回答正确.

我不能改变这个过程,所以我想到在答案的字段中添加一个id,并检查它是否可见.如果是并且用户点击提交按钮,我想在标签上应用属性禁用按钮.我不知道的是如何做到这一点,而不使用jquery.

与jQuery我可以做这样的事情：

if($('#secretAns').is(':visible')) {
    //i think it Could be the solution 
    $('#general_Submit.Label').attr( disabled,disabled );

}

申请：

<div id="secretAns" class="loginTxtFieldWrapper">
    <font color='red'>*</font><input type="text" name="secretAns" />
    <input type="hidden" name="isAnswerPage" value="1"/>
</div>
<p id="loginSubmitLink">
    <input id="general_Submit.Label" type="submit" value="general_Submit.Label" />" />
</p>

我觉得很难搜索纯粹的JavaScript解决方案,因为每个人都倾向于使用jquery,我不能在我的应用程序中使用它,所以如果有人可以帮助我用纯粹的javascript来做到这一点,我会欣赏的.

解决方法

Google帮助我了解了jQuery如何做,你也可以这样做：

In jQuery 1.3.2 an element is visible if its browser-reported offsetWidth or offsetHeight is greater than 0.

Release notes

搜索源代码给了我这个：

// The way jQuery detect hidden elements,and the isVisible just adds "!".
elem.offsetWidth === 0 && elem.offsetHeight === 0

原文地址：https://www.jb51.cc/html/224759.html