如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
当前回答
毕竟,没有一个例子适合我, 所以我写了自己的。
测试测试(不支持互联网探索者)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
其他回答
这对我有效,我用show()
和hide()
使我的divi 隐藏/可见:
if( $(this).css('display') == 'none' ){
/* your code goes here */
} else {
/* alternate logic */
}
您也可以使用 plain JavaScript 来做到这一点 :
function isRendered(domObj) {
if ((domObj.nodeType != 1) || (domObj == document.body)) {
return true;
}
if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
return isRendered(domObj.parentNode);
} else if (window.getComputedStyle) {
var cs = document.defaultView.getComputedStyle(domObj, null);
if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
return isRendered(domObj.parentNode);
}
}
return false;
}
注:
到处工作
嵌套元素的工程
CSS 和内嵌样式的工作
不需要框架
这些答案都没有涉及我所理解的问题,这就是我所寻求的,"我如何处理那些visibility: hidden
?"两者都不是:visible
英:hidden
将处理此事宜, 因为他们都在查找文档中的显示。 就我所能确定的情况来看, 没有选择器可以处理 CSS 可见度 。 以下是我如何解决这个问题的( 标准 jQuery 选择器, 可能有更压缩的语法 ) :
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
缩略:visible
根据j 查询文档:
- 他们有一个CSS
display
价值的数值none
.- 它们是构成元素的构成元素,
type="hidden"
.- 它们的宽度和高度明确定为0。
- 隐藏了祖先元素,所以该元素不在页面上显示。
具有下列要素的要件要件:
visibility: hidden
或opacity: 0
认为是可见的,因为它们仍在布局中消耗空间。
在某些情况中,这有用,而在另一些情况中则无用,因为如果你想检查该元素是否可见(如果您想检查该元素是否可见) 。display != none
无视家长的能见度 你会发现.css("display") == 'none'
不仅速度更快,而且还会正确返回可见度检查。
如果您要检查可见度而不是显示, 您应该使用 :.css("visibility") == "hidden"
.
也考虑到附加 jQuery 注释:
因为
:visible
是 jQuery 扩展名,不属于 CSS 规格的一部分,使用:visible
无法利用本地DOM提供的绩效提升querySelectorAll()
方法。在使用:visible
选择元素,首先使用纯 CSS 选择器选择元素,然后使用.filter(":visible")
.
而且,如果你对工作表现很关心,你应该检查一下现在你看到我... 表现/隐藏表现(2010-05-04)。并使用其他方法显示和隐藏元素。