如何使元素的可见度.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
// };
其他回答
这些答案都没有涉及我所理解的问题,这就是我所寻求的,"我如何处理那些visibility: hidden
?"两者都不是:visible
英:hidden
将处理此事宜, 因为他们都在查找文档中的显示。 就我所能确定的情况来看, 没有选择器可以处理 CSS 可见度 。 以下是我如何解决这个问题的( 标准 jQuery 选择器, 可能有更压缩的语法 ) :
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
$(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>
毕竟,没有一个例子适合我, 所以我写了自己的。
测试测试(不支持互联网探索者)filter:alpha
):
a) 检查文档是否隐藏
(b) 检查某一元素是否宽度为零/高度/不透明,或display:none
/ visibility:hidden
内嵌样式
(c) 检查元素的中心(也因为它比测试每个像素/角的速度快)是否被其他元素隐藏(和所有祖先,例如:overflow:hidden
/ 滚动 / 一个元素在另一个元素之上) 或屏幕边缘
(d) 检查某一元素是否为零宽度/高度/不透明,或display:none
可见度:隐藏在计算风格中(在所有祖先中)
测试
Android4.4(土著浏览器/克罗美/费勒福克斯)、Firefox(风/麦克)、Chrome(风/麦克)、歌剧(风)预选/Mac WebKit, Internet Explorer (Internet Explorer 5-11文件模式+虚拟机器上的因特网探索者8)和Safari (Windows/Mac/iOS)。
var is_visible = (function () {
var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
relative = !!((!x && !y) || !document.elementFromPoint(x, y));
function inside(child, parent) {
while(child){
if (child === parent) return true;
child = child.parentNode;
}
return false;
};
return function (elem) {
if (
document.hidden ||
elem.offsetWidth==0 ||
elem.offsetHeight==0 ||
elem.style.visibility=='hidden' ||
elem.style.display=='none' ||
elem.style.opacity===0
) return false;
var rect = elem.getBoundingClientRect();
if (relative) {
if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
} else if (
!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight/2 < 0 ||
rect.left + elem.offsetWidth/2 < 0 ||
rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
if (el === document) {break;} else if(!el.parentNode) return false;
comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
el = el.parentNode;
}
}
return true;
}
})();
如何使用 :
is_visible(elem) // boolean
可以创建一个函数来检查可见度/显示属性,以便测量该元素是否显示在界面中。
function checkUIElementVisible(element) {
return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}