检测元素是否可见（不使用 jQuery）答案

【问题标题】：Detect if an element is visible (without using jQuery)检测元素是否可见（不使用 jQuery）
【发布时间】：2013-01-02 12:26:17
【问题描述】：

我正在尝试在不使用 jquery 的情况下检测我提供 id 的 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 做到这一点，我将不胜感激。

【问题讨论】：

检查 jQuery 的源代码，看看他们用:visible 选择器做了什么。
Javascript: How to check if element is visible?的可能重复
@Ajinkya，你注意到“重复”是一个 jQuery 问题，对吧？
这就是我现在要说的......我不能使用jquery。
@gdoron：刚刚注意到了。谢谢

标签： javascript html cross-browser dom-events

【解决方案1】：

Google 帮助我了解了 jQuery 是如何做到的，你也可以这样做：

在 jQuery 1.3.2 中，如果浏览器报告的 offsetWidth 或 offsetHeight 大于 0，则元素可见。

Release notes

搜索源代码给了我这个：

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

【讨论】：

@gdoron，好镜头！确实是这样...我会找出解决方案并在找到时在此处发布。谢谢。 +1
我添加我的答案只是为了显示我的问题的解决方案，但我的问题标题的答案可以是你的答案。我只是不明白 offsetwidth 或 offsetheight 是怎么回事。我了解它检查可见性的方法，但我仍然会搜索更多关于它的信息。非常感谢
来自 jQuery 源代码。 github.com/jquery/jquery/blob/master/src/css/…
@theeranitp，请记住，这是近 7 年的答案，似乎他们现在才添加 || elem.getClientRects().length。

【解决方案2】：

请看这是习惯性的很少代码可能有用

<!DOCTYPE html>
<html>
<body>
<div id="one" style="visibility: hidden;">The content of the body element is displayed in your browser.
</div>

<div id="two" style="visibility: visible;"> I'm Cool
</div>

<div onclick="push();"> Click me </div>
<script>
function push() {
a = document.getElementById("one").style.visibility;
alert("one "+a);

b = document.getElementById("two").style.visibility;
alert("one "+b);
}
</script>
</body>
</html>

以上代码使用 U 所需的 ID 给出了 div 的可见性状态。

【讨论】：

不仅仅是style.visibilty。
您可以设置可见计数器变量并将其用作 if(visible_counter) 并按照其余代码进行操作。
事实上 style.visibility 如果属性未设置则返回 null （我认为这是原因），而 .offsetWidth 如果不可见则返回 null ，如果可见则返回正值。所以我相信@gdoron 是最好的方式
它是 Null ，接受。但是当它的状态第一次可见/隐藏时，我们可以初始化它。此外 if($('#secretAns').is(':visible')) 将返回 null ，除非设置了 #secretAns 可见性。如果我错了，请纠正我。

【解决方案3】：

当我在考虑禁用该按钮时，我在这里写下我对解决此问题的想法是错误的，因为要让它工作起来真的很昂贵。这样，在研究，测试了一些想法并阅读了@gdoron和@AmeyaRote带来的想法之后，我想出一个简单的解决方案是点击后隐藏“提交”按钮（页面刷新，验证检查并该按钮在此过程后再次可用）。因此，这里是解决问题的解决方案，以避免用户在提交按钮上多次单击，对于这种我无法禁用它的特殊情况（如果我在单击后禁用，则没有提交表单）：

HTML

我刚刚添加了 onclick 属性，该属性调用了我创建的用于隐藏按钮的 javascript 函数：

<p id="loginSubmitLink">
    <input id="general_Submit.Label" type="submit" onclick ="avoidDoubleSubmit();" value="general_Submit.Label" />" />
</p>

Javascript

function avoidDoubleSubmit() {
    <c:if test="${not empty secretQues}">
        event_addEvent(window,'load',function(){document.ResetPasswordForm.secretAns.focus();});
        document.getElementById('general_Submit.Label').style.display ='none';
    </c:if>
}

【讨论】：

【解决方案4】：

这是我前段时间写的。据我所知，这处理了很多案例。这实际上检查了用户是否在当前状态下看到了该元素。

检查显示、可见性、不透明度、溢出怪癖并递归执行，直到我们到达文档节点。

function isVisible(el) {
        while (el) {
            if (el === document) {
                return true;
            }

            var $style = window.getComputedStyle(el, null);

            if (!el) {
                return false;
            } else if (!$style) {
                return false;
            } else if ($style.display === 'none') {
                return false;
            } else if ($style.visibility === 'hidden') {
                return false;
            } else if (+$style.opacity === 0) {
                return false;
            } else if (($style.display === 'block' || $style.display === 'inline-block') &&
                $style.height === '0px' && $style.overflow === 'hidden') {
                return false;
            } else {
                return $style.position === 'fixed' || isVisible(el.parentNode);
            }
        }
    }

【讨论】：

【解决方案5】：

在 general_Submit.Label 按钮上单击调用函数 Callfun() 然后禁用按钮

<input id="general_Submit.Label" onclick="Callfun()" type="submit" value="<ezmi18n:message key="general_Submit.Label" />" />

    function Callfun()
    {
     document.getElementById("general_Submit.Label").disabled = true;
    }

【讨论】：