如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
当前回答
此选项可以检查标签是否可见
// using a pure CSS selector
if ($('p:visible')) {
alert('Paragraphs are visible (checked using a CSS selector) !');
};
// using jQuery's is() method
if ($('p').is(':visible')) {
alert('Paragraphs are visible (checked using is() method)!');
};
// using jQuery's filter() method
if ($('p').filter(':visible')) {
alert('Paragraphs are visible (checked using filter() method)!');
};
// you can use :hidden instead of :visible to reverse the logic and check if an element is hidden
// if ($('p:hidden')) {
// do something
// };
其他回答
只是简单地检查一下这个元素是否是可见可见然后,他将返回尘埃,布尔j 查询,通过添加来隐藏元素无显示无对于元素,所以如果您想要使用纯 JavaScript,您仍然可以这样做,例如:
if (document.getElementById("element").style.display === 'block') {
// Your element is visible; do whatever you'd like
}
另外,您还可以使用 jQuery , 您的代码的其余部分似乎也使用 JQuery , 您的代码块较小 。 在 jQuery 中, 类似下面的密钥也可以使用相同的密钥 :
if ($(element).is(":visible")) {
// Your element is visible, do whatever you'd like
};
还使用css
jQuery 中的方法可以产生相同的结果:
if ($(element).css('display') === 'block') {
// Your element is visible, do whatever you'd like
}
若需要检查可见度和显示度,您还可以做以下工作:
if ($(this).css("display") === "block" || $(this).css("visibility") === "visible") {
// Your element is visible, do whatever you'd like
}
这些答案都没有涉及我所理解的问题,这就是我所寻求的,"我如何处理那些visibility: hidden
?"两者都不是:visible
英:hidden
将处理此事宜, 因为他们都在查找文档中的显示。 就我所能确定的情况来看, 没有选择器可以处理 CSS 可见度 。 以下是我如何解决这个问题的( 标准 jQuery 选择器, 可能有更压缩的语法 ) :
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
expect($("#message_div").css("display")).toBe("none");
$(document).ready(function() {
if ($("#checkme:hidden").length) {
console.log('Hidden');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
<span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
<br>Product: Salmon Atlantic
<br>Specie: Salmo salar
<br>Form: Steaks
</div>
您可以通过使用:visible
和:hidden
选择器。
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
如果你只是根据它的能见度 依据一个元素行事 你可以包括:visible
或:hidden
在选择表达式中。例如:
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');