如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
当前回答
我找了这个, 没有一个答案是正确的 我的案子是正确的, 所以我创造了一个功能, 返回假的,如果一个人的眼睛看不到元素
jQuery.fn.extend({
isvisible: function() {
//
// This function call this: $("div").isvisible()
// Return true if the element is visible
// Return false if the element is not visible for our eyes
//
if ( $(this).css('display') == 'none' ){
console.log("this = " + "display:none");
return false;
}
else if( $(this).css('visibility') == 'hidden' ){
console.log("this = " + "visibility:hidden");
return false;
}
else if( $(this).css('opacity') == '0' ){
console.log("this = " + "opacity:0");
return false;
}
else{
console.log("this = " + "Is Visible");
return true;
}
}
});
其他回答
if($("h1").is(":hidden")){
// your code..
}
缩略: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)。并使用其他方法显示和隐藏元素。
您也可以使用 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 和内嵌样式的工作
不需要框架
使用指定用于“隐藏”元素的分类很简单,也是最有效的方法之一。Display
“ 无” 样式的“ 无” 样式的性能将比直接编辑该样式更快。 我在 Stack 溢出问题中非常透彻地解释了其中的一些内容 。在同一 div 中将两个元素转换为可见/隐藏.
Google前端工程师Nicholas Zakas在Google Tech Talk的影片中,
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
Click here
</div>
<img id="book" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>
来源(来自我的博客):