如何使元素的可见度.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;
}
}
});
其他回答
人们可以简单地使用hidden
或visible
属性, 如 :
$('element:hidden')
$('element:visible')
或者您可以简化相同的是如下所示。
$(element).is(":visible")
我只是想澄清,在jQuery,
某些要素可被视为隐藏,原因如下:
- 它们有一个 CSS 显示值, 没有任何值 。
- 它们组成元素 类型 = "隐藏" 。
- 它们的宽度和高度明确定为0。
- 隐藏了祖先元素,所以该元素不在页面上显示。
具有可见度的要素: 隐藏或不透明: 0 被视为可见, 因为它们仍然在布局中消耗空间 。 在隐藏元素的动画中, 该元素被视为可见, 直到动画结束 。
资料来源:隐藏选择器 jQuery API 文件
if($('.element').is(':hidden')) {
// Do something
}
通常当检查某物是否可见时, 您会立即直接去做其他事情。 jQuery 链条让事情变得容易。
所以,如果您有一个选择器, 并且只有显示或隐藏时才想要对它执行某些动作, 您可以使用filter(":visible")
或filter(":hidden")
然后用您想要采取的行动链绑住它。
所以,而不是一个if
语句, 像这样的语句 :
if ($('#btnUpdate').is(":visible"))
{
$('#btnUpdate').animate({ width: "toggle" }); // Hide button
}
或更有效率,但更丑陋:
var button = $('#btnUpdate');
if (button.is(":visible"))
{
button.animate({ width: "toggle" }); // Hide button
}
你可以单行完成所有任务:
$('#btnUpdate').filter(":visible").animate({ width: "toggle" });
有两种方法可以检查元素的可见度。
解决方案 # 1
if($('.selector').is(':visible')){
// element is visible
}else{
// element is hidden
}
解决方案 # 2
if($('.selector:visible')){
// element is visible
}else{
// element is hidden
}
由于问题只涉及一个要素,本守则可能更适合:
// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
与twernt的建议,但适用于单一个元素;并且匹配 jQuery FAQ 中推荐的算法.
我们用jQuery的是( )将选中的元素与其它元素、选择器或任何 jQuery 对象一起检查。此方法沿 DOM 元素沿 DOM 元素查找匹配,该匹配符合所传递的参数。如果匹配,则返回为真实,否则返回为虚假。