检测元素是否可见（不使用jquery）

问题描述

我试图检测一个我给出id的html元素是否可见而不使用jquery。

I'm trying to detect if an html element I gave an id is visible or not without using jquery.

上下文：

在忘记的用户密码页面中，我有一个表单，用户输入他的登录名并点击提交。在那之后，如果他设置了一个挑战问题，它将被显示，他将能够回答这个问题并再次提交。 （之前的相同按钮）。

In the forgotten user password page, I have a form where the user enter his login name and clicks on submit. After that, if he has set a chalenge question, it will be shown and he will be able to answer this question and submits again. (same button before).

我的问题：

当用户点击时提交，在IE中，如果他多次点击它，他每次点击它都会收到一封电子邮件。

when the user clicks on submit, in IE, if he clicks on it several times, he'll get one e-mail for each time he clicks on it.

我是什么想：

我想点击这个提交按钮后禁用该按钮，但我只能在两个条件正确的情况下禁用它：

I want to disable the button after clicking on this submit button, but I can only disable it if two conditions are correct:

1. 如果用户已经提交了他的登录名（没有错误）。


2. 用户有一个挑战问题注册并且他正确回答。

我无法改变这个过程，所以我考虑在字段中添加一个id答案并检查它是否可见。如果是，并且用户点击了提交按钮，我想在标签上应用属性禁用按钮。我不知道如何在不使用jquery的情况下执行此操作。

I cannot change the process this is done, so I thought about adding an id in the field of the answer and checks if it's visible. if it is and the user clicks on the submit button, I want to apply the attribute disable button on the label. What I don't know is how to do this without using jquery.

使用jQuery我可以这样做：

with jQuery I could do something like this:

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做这件事，我会很感激。

I find hard to search for pure javascript solutions, because everybody tends to use jquery, and I can't use it in my application, so if someone can help me to do this with pure javascript, i'll appreciate.

推荐答案

谷歌帮助我了解jQuery是如何做到的你可以这样做：

Google helped me finding out how jQuery does it, you can do the same:

搜索源代码给了我这个：

Searching the source code gave me this:

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

这篇关于检测元素是否可见（不使用jquery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！