如何使用 . hide () 、.show () 或.toggle () 来切换元素的可见度 ?
如果元素可见或隐藏, 我如何测试 ?
如何使用 . hide () 、.show () 或.toggle () 来切换元素的可见度 ?
如果元素可见或隐藏, 我如何测试 ?
当前回答
要检查是否显示 I 使用 :
if ( !$('#book').is(':visible')) {
alert('#book is not visible')
}
或以下是 sam , 将jquery 选择器保存在一个变量中, 以便在需要它多次时有更好的性能 :
var $book = $('#book')
if(!$book.is(':visible')) {
alert('#book is not visible')
}
其他回答
您也可以使用普通的笔记本进行此项操作 :
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 工作, 内嵌样式不需要框架 。
有两种方法可以检查元素的可见度。
解决办法1
if($('.selector').is(':visible')){
// element is visible
}else{
// element is hidden
}
解决办法2
if($('.selector:visible')){
// element is visible
}else{
// element is hidden
}
您可以在显示或隐藏 cs 类时,通过切换该类来使用该 Cs 类 :
.show{ display :block; }
设置您的 jquery toggle类 () 或添加类 () 或删除类 () 。
举个例子,
jquery (' myid'. 切换类 ('show')
当元素没有显示时, 上面的代码会添加显示 cs 类, 而当元素显示类别时, 将会删除 。
当你在检查它是否可见时, 你可以遵循这个拼字码,
jquery ('mid'.) 有类('show');
上面的代码将返回一个布尔, 当 Myid 元素含有我们的类( show) , 而当它没有( show) 类( show) 时则返回一个布尔 。
因为元素具有可见度: 隐藏或不透明: 0 被视为可见, 因为它们仍然消耗着布局中的空间( 如 jquery 描述为 jquery : 可见选择器) - 我们可以检查元素是否以这种方式真正可见 :
function isElementReallyHidden (el) {
return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}
var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
if (isElementReallyHidden(this)) {
booElementReallyShowed = false;
}
});
$( "div:visible" ).click(function() {
$( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
$( "div:hidden" ).show( "fast" );
});
api 文档: 可见选择器