使用 jQuery 检查元素是不是为“显示：无”或单击时阻塞

Posted 2023-03-06

【中文标题】使用 jQuery 检查元素是不是为“显示：无”或单击时阻塞

【英文标题】：Check, using jQuery, if an element is 'display:none' or block on click使用 jQuery 检查元素是否为“显示：无”或单击时阻塞

【发布时间】：2013-04-02 05:30:38

【问题描述】：

我想检查和排序隐藏的元素。是否可以找到所有具有display 属性和none 值的元素？

【参考方案1】：

您可以使用:visible 查找可见元素，使用:hidden 查找隐藏元素。此隐藏元素的display 属性设置为none。

hiddenElements = $(':hidden');
visibleElements = $(':visible');

检查特定元素。

if($('#yourID:visible').length == 0)

如果元素占用了文档中的空间，则认为它们是可见的。 可见元素的宽度或高度大于零， Reference

您还可以将is() 与:visible 一起使用

if(!$('#yourID').is(':visible'))

如果你想检查显示的值那么你可以使用css()

if($('#yourID').css('display') == 'none')

如果您使用显示以下值display 可以有。

显示：无

显示：内联

显示：块

显示：列表项

显示：内联块

检查可能的display 值here 的完整列表。

使用 javascript 检查显示属性

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none"; 

【讨论】：

好吧，在我的场景中，每个元素都有一个 ID，所以这个技巧对我有用 :)

@NicholasFrancis，我已经更新了我的答案以找出所有隐藏的元素。

它是否也检查内联 css。我有来自 jquery 的内联编写的 css display: block;。我无法用你的方法检查它。帮助我。

是否添加了 jQuery 并且您在添加到 DOM 后正在访问该元素？你能告诉我代码吗？最好在jsfiddle.net做个demo@

什么是 JavaScript 等价物？

【参考方案2】：

$("element").filter(function()  return $(this).css("display") == "none" );

【讨论】：

+1：这实际上比接受的答案针对所提出的问题更有用，因为即使父元素具有style="display: none;"，这也将起作用。如果您想要特定元素可见性并且父元素被隐藏，则使用 :visible 和 :hidden 的答案将失败，因为这些选择器会返回页面上的整体可见性（这不是问题）。

这在 JS DOM 环境中运行 unite test 时有效。

对于一个 tabbing 插件，它在 css 中设置了visibility: 'hidden';，所以检查结果也检查了：$(this).css('visibility') != 'hidden'

就我而言，这更有用，因为我有 2 条错误消息，其中一条有 display = none，另一条有 display = block，但页面还有其他选项卡，这会导致这两条消息不可见，当我在其他选项卡中时，...但有 1 条消息可见，此选择器将帮助我。

【参考方案3】：

是的，您可以使用 css 函数。下面将搜索所有 div，但您可以根据需要修改它

$('div').each(function()

    if ( $(this).css('display') == 'none')
    
       //do something
    
);

【参考方案4】：

在 jQuery 中有两种方法来检查可见性：

$("#selector").is(":visible")

和

$("#selector").is(":hidden")

您还可以根据选择器中的可见性执行命令；

$("#selector:visible").hide()

或

$("#selector:hidden").show()

【讨论】：

注意：这将不返回所选元素的特定可见属性，正如问题所问的那样，:visible 还取决于父祖先可见性。如果祖先是display: none，则无论display 状态如何，所有后代都将不可见。

【参考方案5】：

使用这个条件：

if (jQuery(".profile-page-cont").css('display') == 'block')
    // Condition 

【参考方案6】：

$('#selector').is(':visible');

【讨论】：

注意：这将不返回所选元素的特定可见属性，正如问题所问的那样，:visible 还取决于父祖先可见性。如果祖先是display: none，则无论display 状态如何，所有后代都将不可见。

【参考方案7】：

我个人更喜欢另一个快捷方式，而不是 .is() 或 .length：

if($('.myclass:visible')[0])
   // is visible
else 
   // is hidden

【参考方案8】：

Live demo

<div id="div" style="display: none"></div>
<button class="try">Try now</button>

<script type="text/javascript">
$(document).on('click','.try',function() 
var style = $('#div');
if (style.css("display") == "none") 
  alert("display not available");

);
</script>