如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
如何使元素的可见度.hide()
, .show()
,或.toggle()
?
如果一个元素是visible
或hidden
?
当前回答
检查隐藏元素的方法太多。 这是最好的选择( 我只是推荐你):
使用 jQuery, 在 CSS 中设定隐藏的元素“ 播放: noone ” 。
重点是:
$('element:visible')
以及一个可供使用的例子:
$('element:visible').show();
其他回答
它返回时返回false
如果元素不可见。
function checkVisible(e) {
if (!(e instanceof Element)) throw Error('not an Element');
const elementStyle = getComputedStyle(e);
if (elementStyle.display === 'none' || elementStyle.visibility !== 'visible' || elementStyle.opacity < 0.1) return false;
if (e.offsetWidth + e.offsetHeight + e.getBoundingClientRect().height +
e.getBoundingClientRect().width === 0) {
return false;
}
const elemCenter = {
x: e.getBoundingClientRect().left + e.offsetWidth / 2,
y: e.getBoundingClientRect().top + e.offsetHeight / 2
};
if (elemCenter.x < 0 || elemCenter.y < 0) return false;
if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
do {
if (pointContainer === e) return true;
} while (pointContainer = pointContainer.parentNode);
return false;
}
检查隐藏元素的方法太多。 这是最好的选择( 我只是推荐你):
使用 jQuery, 在 CSS 中设定隐藏的元素“ 播放: noone ” 。
重点是:
$('element:visible')
以及一个可供使用的例子:
$('element:visible').show();
缩略: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)。并使用其他方法显示和隐藏元素。
有很多方法可以检查元素是否可见或隐藏在 jQuery 中。
Demo HTML 例如引用
<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>
使用可见性过滤过滤器选择器$('element:hidden')
或$('element:visible')
$('element:hidden')
:选择隐藏的所有元素。
Example:
$('#content2:hidden').show();
$('element:visible')
:选择可见的所有元素。
Example:
$('#content:visible').css('color', '#EEE');
更多信息http://api.jquery.com/category/selectors/visibility-filter-selectors/
使用使用is()
过滤过滤
Example:
$('#content').is(":visible").css('color', '#EEE');
Or checking condition
if ($('#content').is(":visible")) {
// Perform action
}
下面的代码检查元素是否隐藏在 jQuery 中或可见
// You can also do this...
$("button").click(function(){
// show hide paragraph on button click
$("p").toggle("slow", function(){
// check paragraph once toggle effect is completed
if($("p").is(":visible")){
alert("The paragraph is visible.");
} else{
alert("The paragraph is hidden.");
}
});
});