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

我试图检测一个html元素是否可见或不使用jquery。检测元素是否可见（不使用jQuery）

上下文：

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

我的问题：当用户点击提交，在IE中，如果他点击了几次

，他会得到一个电子邮件，他每点击它的时间。

我想什么：

我想点击这个提交按钮后，关闭按钮，但我只能禁用它，如果两个条件是正确的：

如果用户已经提供他的登录名（没有错误）。
用户有一个chalenge问题注册，他回答正确。

我不能改变这个过程，所以我想过在答案的字段中添加一个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来做到这一点，我会感激。

来源

2013-01-02 periback2

检查jQuery的源代码，看看他们在用'：visible'选择器做什么。 – gdoron

可能重复[Javascript：如何检查元素是否可见？]（http://stackoverflow.com/questions/11391452/javascript-how-to-check-if-element-is-visible） – xyz

@Ajinkya，你注意到“重复”是一个jQuery问题，对吧？ – gdoron

谷歌帮我找出的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

来源

2013-01-02 12:37:15 gdoron

只是FYI：我upvoted :) – xyz

@gdoron，不错的投篮！这是真的......我会找出解决方案，并在我找到它的时候在这里发布。谢谢。 +1 – periback2

我加了我的答案只是为了显示我的问题的解决方案，但我的问题的标题的答案可以是你的答案。我只是不明白offsetwidth或offsetheight是如何。我了解它的方法来检查可见性，但我仍然会进一步搜索它。非常感谢 – periback2

关于general_Submit。标签按钮点击调用一个函数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; 
    }

来源

2013-01-02 12:44:47

请参阅本是习惯很少的代码可能是有用的

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

上面的代码中给出了div的可见性状态使用它的ID为你需要。

来源

2013-01-02 12:45:51

不仅仅是'style.visibilty'。 – gdoron

您可以设置可见的计数器变量并像使用它（visible_counter）一样使用它，并遵循代码的其余部分。 –

事实上，如果未设置属性（我认为这是原因），则style.visibility返回null，而如果.offsetWidth不可见，则返回null，如果它可见，则返回正值。所以我相信@gdoron是最好的方式 – periback2

因为我在考虑关闭按钮，所以我在这里写下我对这个问题的解决方案的想法是错误的，因为使它工作真的很昂贵。这样，在学习，测试一些想法并阅读@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> 
}

来源

2013-01-03 10:58:27 periback2

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

检查显示器，可见性，不透明度，溢出怪癖，并递归直到文档节点。

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); 
      } 
     } 
    }

来源

2017-06-18 06:48:18 gauravmuk

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

回答

相关问题