如何检查元素是否可见

Question

我怎么知道我的element是否可见使用javascript 。 我正在使用$('#element').hide(); ， $('#element').show(); 隐藏或显示元素 如何检查element是否显示？ 元素在模态中。 我试图改变不在模态中的元素并且它起作用，但是当我将元素放在模态中时它不起作用..

我尝试使用此代码，但它无法正常工作。

    <div class="well me">
         <label for="majore">Major Exam</label>
            <div class="input-group">
                 <input type="text" class="form-control majore" id="majore" oninput="total();"/>
            <span class="input-group-addon">
              <i class="fa fa-percent"></i>
             </span>
              </div>
     </div>

     <script>
            if ($('.me').is(':visible')) {                          
                  mt = m / 100 * 50 + 50;
                } 
    </script>

Answer 1

 "none" == document.getElementById("element").style.display //Check for hide

 "block" == document.getElementById("element").style.display //Check for show

你也可以使用

  if ($('#element').css('display') == 'none') {
    alert('element is hidden');
 } 

Answer 2

检查显示：[none | block]，忽略可见：[true | false]

$('#element').is(":visible"); 

Answer 3

看来你的选择器是错误的。

$("[element]").is(":visible")示例$("[element]").is(":visible")下面$("[element]").is(":visible") :(用于参考）

 $("#show").on("click", function() { $("#text").show(); }) $("#hide").on("click", function() { $("#text").hide(); }) $("#getStatus").on("click", function() { alert($("#text").is(":visible")); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="text">Hello</div> <button id="show">Show</button> <button id="hide">Hide</button> <button id="getStatus">Get Status</button> 

Answer 4

$('.me')是一个类选择器，它将返回元素具有类me的elements array 。

因此，您需要使用this或使用index来定位特定div ，因为可以有许多具有相同class name elements 。

$('.me').is(':visible')这将检查第一个元素并根据第一个元素的可见性返回结果。

你可以试试

$(".me").eq(1).is(':visible')    //Here 1 is index of div which can vary

要么

$(this).is(':visible')

Answer 5

您可以查看以下提及的链接：visible Selector。

https://api.jquery.com/visible-selector/ http://www.w3schools.com/jquery/sel_visible.asp

另请查看w3schools示例。