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

我在寻找答案的过程中偶然发现了这个问题，该答案如何逻辑上检查HTML元素在JavaScript中是否可见。当Pravin回答正确的操作时，我注意到，例如display的值是

element.style.display === 'inline'

然后Pravin的代码可能不适用于这种情况，因为它仅检查"none"和"block"的值。

此外，我需要了解如何才能正确读取 style.display 属性，以便在 console.info（）中不会将其显示为空字符串。 在调试单元测试时输出。我没有足够的声誉来评论普拉文接受的答案，因此这是另一项建议。 style.display的实际值可以使用函数读取

window.getComputedStyle()

作为一个很好的例子，我编写了一个名为 isLabelVisible 的函数，以检查某些<select>下拉元素的绑定标签可见性。

这是我对 isLabelVisible 函数的解决方案，仅使用JavaScript：

const isLabelVisible = (id) => {
    const styles = window.getComputedStyle(document.querySelector(`label[for=${id}]`), null);
    if (styles.display === 'none') return false;
    return true;

};

元素必须是文档正文中DOM树的一部分。例如，使用此逻辑，flex或grid或block将被解析为“可见”。在页面上只有none值会被隐藏。

Answer 3

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

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

Answer 4

看来你的选择器错了。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

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

因此，您需要使用div或使用this来定位特定的index，因为可能有多个elements具有相同的class name。< / p>

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

你可以尝试

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

OR

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

Answer 6

您可以查看以下提及的链接：可见选择器。

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

另请查看w3schools示例。

如何检查元素是否可见

6 个答案: