如何使元素的可见度.hide(), .show(),或.toggle()?
如果一个元素是visible或hidden?
当前回答
人们可以简单地使用hidden或visible属性, 如 :
$('element:hidden')
$('element:visible')
或者您可以简化相同的是如下所示。
$(element).is(":visible")
其他回答
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');
如果使用角,请检查:不要使用与角的隐藏属性
使用任何可见的选择器或隐藏的选择器检查粘度 :
使用.toggle ()- 显示和隐藏元素
function checkVisibility() {
// check if element is hidden or not and return true false
console.log($('#element').is(':hidden'));
// check if element is visible or not and return true false
console.log($('#element').is(':visible'));
if ( $('#element').css('display') == 'none' || $('#element').css("visibility") == "hidden"){
console.log('element is hidden');
} else {
console.log('element is visibile');
}
}
checkVisibility()
$('#toggle').click(function() {
$('#element').toggle()
checkVisibility()
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='toggle'>Toggle</button>
<div style='display:none' id='element'>
<h1>Hello</h1>
<p>it's visible</p>
</div>content.style.display != 'none'
function toggle() {
$(content).toggle();
let visible= content.style.display != 'none'
console.log('visible:', visible);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="toggle()">Show/hide</button>
<div id="content">ABC</div>jQuery 解决方案, 但对于想更改按钮文字的人来说,
$(function(){
$("#showHide").click(function(){
var btn = $(this);
$("#content").toggle(function () {
btn.text($(this).css("display") === 'none' ? "Show" : "Hide");
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showHide">Hide</button>
<div id="content">
<h2>Some content</h2>
<p>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>检查隐藏元素的方法太多。 这是最好的选择( 我只是推荐你):
使用 jQuery, 在 CSS 中设定隐藏的元素“ 播放: noone ” 。
重点是:
$('element:visible')
以及一个可供使用的例子:
$('element:visible').show();
