如何检查元素是否可见

Question

如何使用JavaScript判断元素是否可见？我正在使用$('#element').hide();和$('#element').show(); 来隐藏或显示元素。如何检查元素是否已显示？该元素在模态框中。我尝试更改不在模态框中的元素，它可以正常工作，但当我将元素放在模态框中时它不起作用。

我尝试使用以下代码，但它不起作用。

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

- nethken

---

主要是一个标签名吗？ - Ajay Narain Mathur

@PranavCBalan 我已经尝试过了，但是它没有起作用。 - nethken

你忘记加上 # 了吗？ - trincot

@nethken：您能否在代码片段中重现此问题？ - Pranav C Balan

该元素是否是另一个隐藏元素的子元素（或后代）？ - trincot

Answer 1

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

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

您可以使用“like”关键字。

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

- User

Answer 2

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

以下是$("[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>

- Ajay Narain Mathur

---

我的div在模态框中，先生。 - nethken

Answer 3

检查显示状态：[无|块]，忽略可见性：[真|假]

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

- Vikrant Vir Bhalla

---

你忘记了 #majore#。 - Vikrant Vir Bhalla

Answer 4

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

因此，您需要通过使用 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')

- Mairaj Ahmad

---

先生。我正在尝试检查的元素在模态框中。这是问题的原因吗？ - nethken

在您尝试检查时，模态框是否可见。 - Mairaj Ahmad