如何使元素的可见度.hide(), .show(),或.toggle()?
如果一个元素是visible或hidden?
当前回答
只是简单地检查一下这个元素是否是可见可见然后,他将返回尘埃,布尔j 查询,通过添加来隐藏元素无显示无对于元素,所以如果您想要使用纯 JavaScript,您仍然可以这样做,例如:
if (document.getElementById("element").style.display === 'block') {
// Your element is visible; do whatever you'd like
}
另外,您还可以使用 jQuery , 您的代码的其余部分似乎也使用 JQuery , 您的代码块较小 。 在 jQuery 中, 类似下面的密钥也可以使用相同的密钥 :
if ($(element).is(":visible")) {
// Your element is visible, do whatever you'd like
};
还使用cssjQuery 中的方法可以产生相同的结果:
if ($(element).css('display') === 'block') {
// Your element is visible, do whatever you'd like
}
若需要检查可见度和显示度,您还可以做以下工作:
if ($(this).css("display") === "block" || $(this).css("visibility") === "visible") {
// Your element is visible, do whatever you'd like
}
其他回答
$(document).ready(function() {
if ($("#checkme:hidden").length) {
console.log('Hidden');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
<span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
<br>Product: Salmon Atlantic
<br>Specie: Salmo salar
<br>Form: Steaks
</div>我只是想澄清,在jQuery,
某些要素可被视为隐藏,原因如下:
- 它们有一个 CSS 显示值, 没有任何值 。
- 它们组成元素 类型 = "隐藏" 。
- 它们的宽度和高度明确定为0。
- 隐藏了祖先元素,所以该元素不在页面上显示。
具有可见度的要素: 隐藏或不透明: 0 被视为可见, 因为它们仍然在布局中消耗空间 。 在隐藏元素的动画中, 该元素被视为可见, 直到动画结束 。
资料来源:隐藏选择器 jQuery API 文件
if($('.element').is(':hidden')) {
// Do something
}
这对我有效,我用show()和hide()使我的divi 隐藏/可见:
if( $(this).css('display') == 'none' ){
/* your code goes here */
} else {
/* alternate logic */
}
可以创建一个函数来检查可见度/显示属性,以便测量该元素是否显示在界面中。
function checkUIElementVisible(element) {
return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
1 支查解决办法
确定元素在 jQuery 中是否可见的方法
<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>
全部环圈可见可见div id 'maylement' 元素的孩子:
$("#myelement div:visible").each( function() {
//Do something
});
在jQuery的源头钻探
这就是jQuery如何执行这个功能:
jQuery.expr.filters.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
2 • 如何检查元素是否在屏幕外 - CSS
使用元素. getBoundingClientRect () 您可以很容易地检测到您的元素是否在您视图的边界之内( 屏幕上或屏幕下) :
jQuery.expr.filters.offscreen = function(el) {
var rect = el.getBoundingClientRect();
return (
(rect.x + rect.width) < 0
|| (rect.y + rect.height) < 0
|| (rect.x > window.innerWidth || rect.y > window.innerHeight)
);
};
然后,你可以以几种方式使用:
// Returns all elements that are offscreen
$(':offscreen');
// Boolean returned if element is offscreen
$('div').is(':offscreen');
如果使用角,请检查:不要使用与角的隐藏属性
