如何检查jQuery中是否隐藏了一个元素？
是可能的切换元件的可见性,使用函数.hide(),.show()或.toggle().
如何测试元素是可见还是隐藏？
回答
由于问题涉及单个元素,因此该代码可能更合适:
// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
与twernt的建议相同,但适用于单个元素; 它与jQuery FAQ中推荐的算法相匹配
- 这个解决方案似乎会鼓励`visible = false`和`display:none`; 而Mote的解决方案显然使编码人员意图检查`display:none`; (通过提及隐藏和显示控制`display:none`不是`visible = true`)
- 这是正确的,但``visible`也将检查父元素是否可见,正如chiborg指出的那样.
- 我实际上发现反向逻辑词更好:!$('selector').is(':hidden'); 由于某些原因.值得一试.
- 你有一点 - 我会清楚地表明代码只检查`display`属性.鉴于原始问题是`show()`和`hide()`,并且他们设置`display`,我的答案是正确的.顺便说一下,它与IE7一起工作,这是一个测试片段 - http://jsfiddle.net/MWZss/;
- 这是一个简单的基准测试,是针对regexp的:http://jsperf.com/jquery-is-vs-regexp-for-css-visibility.结论:如果你想要表现,请使用regexp over is()(因为is()在查看实际元素之前首先查找所有隐藏节点).
- Tchalvak，您可能会觉得有些正确，但是请尝试解释原因。与简单语句相反，双重否定会造成混乱，因此$（'selector'）。is（'：shown'）; 比！$（'selector'）。is（'：hidden'）更清晰；
- @TsvetomirTsonev，要检查父母的可见性，可以使用$（element）.parent（）。is（“：visible”）; 我知道这有点旧，但对新搜索有用
- 如果该元素在不具有display：none或visibility：hidden的情况下可见，但是用户向下滚动使其不可见，则$（element）.is（“：visible”）`返回什么？真的看到了吗？有没有简单的方法来检查？
- 在查找`：visible`和[]时，我[发现了这个有用的信息]（http://blog.jquery.com/2009/02/20/jquery-1-3-2-released/#:visible.2F:hidden_Overhauled） `：隐藏`。本质上，它查看`offsetHeight`和`offsetWidth`以使其提供最佳覆盖范围（例如，您可能有一个类以display：none;作为属性，它将正确地报告它是否可见）。
- 不适用于具有父`overflow：hidden;`的元素；
- 不能在chrome上运行，尽管在firefox中可以完美地工作:(必须做类似jQuery（textarea）.parent（）。css（'display'）！='none'而不是jQuery（textarea）.parent（） .is（“：visible”）`
您可以使用hidden选择器:
// Matches all elements that are hidden
$('element:hidden')
而visible选择器:
// Matches all elements that are visible
$('element:visible')
- 当你处理几个元素并且很少发生时 - 即案件的绝对绝对多数 - 时间问题是一个非常小的问题.哦,不!花了42毫秒而不是19毫秒!
- 请注意,本演示文稿中有一些与性能相关的提示:http://addyosmani.com/jqprovenperformance/
- 在第21页到第28页,它显示了缓慢:隐藏或:可见与其他选择器的比较.谢谢你的指点.
- 我正在使用这个选择器来切换元素.$('element:hidden')对我来说总是如此!
- @cwingrav您可能想要重新阅读文档,:hidden适用于所有元素.带有`type ="hidden"`的表单元素只是一个可以触发的情况:隐藏.没有高度和宽度的元素,带有`display:none`的元素和带有隐藏祖先的元素也将符合:hidden.
- @vbullinger 42ms实际上比我想等待网站响应我的行为要长一点 - 这意味着大约3帧的动画下降/延迟只有60 fps
- 链接页面上的嵌入式演示文稿不再有效,请转至http://slideshare.net/AddyOsmani/jquery-proven-performance-tips-tricks/.
- @vbullinger任何超过16ms的处理开始丢弃FPS.所以,是的,如果它需要42毫秒,如果你对性能感兴趣,这可能是一个糟糕的交易.
- 您能解释一下为什么这个不起作用吗：http://jsfiddle.net/URHkb/吗？
- ：hidden适用于表单元素，不显示：无。这不是人们最有可能期望的答案。
- 来自[jQuery docs]（https://api.jquery.com/hidden-selector）：“大量使用`：hidden`可能会对性能产生影响，因为它**可能会迫使浏览器在重新呈现页面之前确定可见性**。通过其他方法（例如使用类）跟踪元素的可见性可以提供更好的性能。”
- 上面AddyOsmani网站的链接有效，但Slideshare不再允许嵌入Flash。您可以在这里查看幻灯片https://www.slideshare.net/AddyOsmani/jquery-performance-tips-and-tricks-2011
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
// element is hidden
}
上述方法不考虑父级的可见性.要考虑父母,你应该使用.is(":hidden")或.is(":visible").
例如,
<div>
<div>Div2</div>
</div>
- 这仅检查单个元素的显示属性.:visible属性还检查父元素的可见性.
- @chiborg是的,但有时这就是你想要的,我必须学习"聪明"的jQuery是多么的艰难...
- 这是使用IE 8进行测试时唯一有效的解决方案.
- 这确实回答了问题,问题是关于单个元素并使用`hide()`,`show()`和`toggle()`函数,但是,正如大多数人已经说过的那样,我们应该使用` :visible`和`:hidden`伪类.
- 当元素存在但当前不在页面上时（例如在detach（）之后），可以使用此答案。
这些答案都没有解决我所理解的问题,这就是我正在寻找的问题,"我该如何处理有问题的物品visibility: hidden？" .既:visible不会也:hidden不会处理这个,因为他们都在寻找文档显示.据我所知,没有选择器来处理CSS可见性.以下是我如何解决它(标准的jQuery选择器,可能有更简洁的语法):
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
- 这个答案很适合从字面上处理`visibility`,但问题是"你如何测试一个元素是否被隐藏或使用jQuery显示？".使用jQuery意味着:`display`属性.
- 具有`visibility:hidden`或`opacity:0`的元素被认为是可见的,因为它们仍然占用布局中的空间.参见[Pedro Rainho**的答案](http://stackoverflow.com/a/8266879/109392)和[jQuery文档](http://api.jquery.com/visible-selector)的`:可见的选择器.
- 你需要遍历DOM来检查节点的父节点,否则,这是没用的.
- 如果使用.hide()隐藏元素,则无效.
从如何确定切换元素的状态？
您可以使用:visible和:hidden选择器确定元素是否已折叠.
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
如果您只是根据其可见性对元素进行操作,则可以只包括:visible或:hidden在选择器表达式中.例如:
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');
- 想知道为什么当元素从可见窗口移开时没有答案提到这种情况,比如`top:-1000px` ...猜猜它是边缘情况
通常在检查某些东西是否可见时,您将立即前进并使用它做其他事情.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" });
- 没有理由在示例中使用的代码段中提取DOM节点,然后必须再次查找它.最好只做:var $ button = $('#btnUpdate'); 然后在If表达式中只使用$按钮而不是$(按钮).具有缓存jQuery对象的优点.
- 这是一个简单的例子 http://www.jquerypot.com/how-to-check-an-element-is-visible-or-not-with-jquery/
:visible根据jQuery文档的选择器:
- 它们的CSS
display值为none.- 它们是表单元素
type="hidden".- 它们的宽度和高度显式设置为0.
- 隐藏了一个祖先元素,因此该元素不会显示在页面上.
元素带
visibility: hidden或被opacity: 0认为是可见的,因为它们仍然占用布局中的空间.
这在某些情况下很有用,而在其他情况下则无用,因为如果要检查元素是否可见(display != none),忽略父项可见性,您会发现执行.css("display") == 'none'操作不仅更快,而且还会正确返回可见性检查.
如果要检查可见性而不是显示,则应使用:.css("visibility") == "hidden".
还要考虑其他jQuery注释:
另外,如果你担心表现,你应该检查现在你看到我...显示/隐藏表现(2010-05-04).并使用其他方法来显示和隐藏元素.
这对我的作品,和我使用show(),并hide()让我的DIV隐藏/可见:
if( $(this).css('display') == 'none' ){
/* your code goes here */
} else {
/* alternate logic */
}
元素可见性和jQuery如何工作 ;
元素可以隐藏display:none,visibility:hidden或opacity:0.这些方法之间的区别:
-
display:none隐藏元素,它不占用任何空间; -
visibility:hidden隐藏元素,但它仍占用布局中的空间; -
if ($('.target').is(':hidden')) { $('.target').show(); } else { $('.target').hide(); } if ($('.target').is(':visible')) { $('.target').hide(); } else { $('.target').show(); } if ($('.target-visibility').css('visibility') == 'hidden') { $('.target-visibility').css({ visibility: "visible", display: "" }); } else { $('.target-visibility').css({ visibility: "hidden", display: "" }); } if ($('.target-visibility').css('opacity') == "0") { $('.target-visibility').css({ opacity: "1", display: "" }); } else { $('.target-visibility').css({ opacity: "0", display: "" }); }有用的jQuery切换方法:
$('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); });
- `visibility:hidden`和`opacity:0`之间的另一个区别是元素仍将使用`opacity:0`响应事件(如点击).我学会了为文件上传制作自定义按钮的技巧.
- 此外，如果您使用 opacity:0 隐藏输入，它仍然会被 Tab 键选中
我会使用CSS类.hide { display: none!important; }.
为了隐藏/显示,我打电话.addClass("hide")/.removeClass("hide").为了检查可见性,我使用.hasClass("hide").
如果您不打算使用.toggle()或使用.animate()方法,这是检查/隐藏/显示元素的简单明了的方法.
- `.hasClass('hide')`不检查父项的祖先是否被隐藏(这也会使其隐藏).你可以通过检查`.closest('.hide').length> 0`来正确地工作,但是为什么重新发明轮子呢？
- 如果元素在 html 上可见，您建议的变体返回，如果元素被您的 javascript 代码/视图引擎直接隐藏，我的变体将返回。如果您知道永远不应该隐藏父元素 - 使用 .hasClass() 更严格并防止未来的错误。如果您不仅要检查可见性，还要检查元素状态集 - 也可以使用 .hasClass() 。在其他情况下 .closest() 更好。
- 为什么不直接使用 .is(":visible") ？
您也可以使用纯JavaScript执行此操作:
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;
}
笔记:
- 与jQuery的工作方式略有不同; 它认为`visibility:hidden`是*可见*.
- 更改上面的代码以模仿(可以说是愚蠢的)jQuery行为很容易.....function isRendered(o){if((o.nodeType!= 1)||(o == document.body)){return true;} if(o.currentStyle && o.currentStyle ["display"]!="none") {return isRendered(o.parentNode);} else if(window.getComputedStyle){if(document.defaultView.getComputedStyle(o,null).getPropertyValue("display")!="none"){return isRendered(o.parentNode) );}}返回false;}
- 当然,我只是为了使用它而不扫描其代码的用户的利益而添加它.:)
演示链接
$('#clickme').click(function() {
$('#book').toggle('slow', function() {
// Animation complete.
alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Click here
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt=""/>资源:
Blogger Plug n Play - jQuery工具和小部件:如何使用jQuery查看元素是隐藏还是可见
- @Adrew 但此链接显示了此功能的工作示例。我认为一个实用的答案可能会影响整页文本:)
可以简单地使用hiddenor visible属性,例如:
$('element:hidden')
$('element:visible')
或者你可以简化同样是如下.
$(element).is(":visible")
ebdiv应该设置为style="display:none;".它适用于show和hide:
$(document).ready(function(){
$("#eb").click(function(){
$("#ebdiv").toggle();
});
});
您应该考虑的另一个答案是,如果您隐藏了一个元素,您应该使用jQuery,但不是实际隐藏它,而是删除整个元素,但是将其HTML内容和标记本身复制到jQuery变量中,然后您需要做的就是使用法线测试屏幕上是否有这样的标签if (!$('#thetagname').length).
当:hidden在jQuery中针对选择器测试元素时,应该认为绝对定位元素可以被识别为隐藏,尽管它们的子元素是可见的.
这首先看起来有些违反直觉 - 虽然仔细查看jQuery文档会提供相关信息:
所以这对于盒子模型和元素的计算样式实际上是有意义的.即使宽度和高度未明确设置为0,也可以隐式设置它们.
看看下面的例子:
console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false.foo {
position: absolute;
left: 10px;
top: 10px;
background: #ff0000;
}
.bar {
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
background: #0000ff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div></div>
</div>更新JQUERY 3.x:
使用jQuery 3,所描述的行为将发生变化!如果元素具有任何布局框,包括零宽度和/或高度的布局框,则将其视为可见元素.
JSFiddle与jQuery 3.0.0-alpha1:
http://jsfiddle.net/pM2q3/7/
然后,相同的JS将具有此输出:
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
这可能有效:
expect($("#message_div").css("display")).toBe("none");
- 这是什么语言/方言/图书馆？我在JS中不熟悉这种语法...
例:
$(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>
<span><!-- Shows Results for Fish --></span> Category:Fish
<br>Product: Salmon Atlantic
<br>Specie: Salmo salar
<br>Form: Steaks
</div>要检查它是否不可见,我使用!:
if ( !$('#book').is(':visible')) {
alert('#book is not visible')
}
或者以下也是sam,将jQuery选择器保存在变量中,以便在需要多次时获得更好的性能:
var $book = $('#book')
if(!$book.is(':visible')) {
alert('#book is not visible')
}
- 您好@Ilia Rostovtsev http://jsperf.com/caching-jquery-selectors您可以在那里运行测试.无论如何,将它缓存以便更快地访问它是件好事
- 您是如何确定在变量中保存选择器真的更快的？
- 如果您想在整个过程中使用单个变量而不是调用和调用同一个对象,那么这是合适的.
使用类切换,而不是样式编辑...
使用指定用于"隐藏"元素的类很容易,也是最有效的方法之一.使用Display'none'样式切换'hidden'类比直接编辑该样式要快.我在Stack Overflow问题中详细解释了其中的一些问题.在同一个div中转换两个元素可见/隐藏.
JavaScript最佳实践和优化
以下是Google前端工程师Nicholas Zakas撰写的Google Tech Talk的真实启发视频:
- 加快你的Javascript(YouTube)
毕竟,没有一个例子适合我,所以我写了自己的.
测试(不支持Internet Explorer filter:alpha):
a)检查文档是否未隐藏
b)检查元素是否具有零宽度/高度/不透明度或display:none/ 或visibility:hidden内联样式
c)检查元素的中心(也因为它比测试每个像素/角更快)是否被其他元素(和所有祖先,例如:overflow:hidden/ scroll/one element over theother)或屏幕边缘隐藏
d)检查元素是否具有零宽度/高度/不透明度或display:none/可见性:隐藏在计算样式中(在所有祖先中)
经过测试
Android 4.4(原生浏览器/ Chrome/Firefox),Firefox(Windows/Mac),Chrome(Windows/Mac),Opera(Windows Presto/Mac Webkit),Internet Explorer(Internet Explorer 5-11文档模式+ Internet Explorer 8)虚拟机),Safari(Windows/Mac/iOS)
var is_visible = (function () {
var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
relative = !!((!x && !y) || !document.elementFromPoint(x, y));
function inside(child, parent) {
while(child){
if (child === parent) return true;
child = child.parentNode;
}
return false;
};
return function (elem) {
if (
document.hidden ||
elem.offsetWidth==0 ||
elem.offsetHeight==0 ||
elem.style.visibility=='hidden' ||
elem.style.display=='none' ||
elem.style.opacity===0
) return false;
var rect = elem.getBoundingClientRect();
if (relative) {
if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
} else if (
!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
(
rect.top + elem.offsetHeight/2 < 0 ||
rect.left + elem.offsetWidth/2 < 0 ||
rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
)
) return false;
if (window.getComputedStyle || elem.currentStyle) {
var el = elem,
comp = null;
while (el) {
if (el === document) {break;} else if(!el.parentNode) return false;
comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
el = el.parentNode;
}
}
return true;
}
})();
如何使用:
is_visible(elem) // boolean
激活使用adblocker 的可见检查的示例:
$(document).ready(function(){
if(!$("#ablockercheck").is(":visible"))
$("#ablockermsg").text("Please disable adblocker.").show();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<div></div>"ablockercheck"是adblocker阻止的ID.因此,检查它是否可见,您可以检测adblocker是否已打开.
您需要同时检查...显示和可见性:
if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
// The element is not visible
} else {
// The element is visible
}
如果我们检查$(this).is(":visible"),jQuery会自动检查这两件事.
也许你可以做这样的事情
$(document).ready(function() {
var visible = $('#tElement').is(':visible');
if(visible) {
alert("visible");
// Code
}
else
{
alert("hidden");
}
});<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<input type="text">Firstname</input>只需通过检查布尔值来检查可见性,例如:
if (this.hidden === false) {
// Your code
}
我为每个函数使用了这个代码.否则,您可以使用它is(':visible')来检查元素的可见性.
因为Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout(如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;
}
});
但是如果元素的CSS如下所示呢？
.element{
position: absolute;left:-9999;
}
所以这个Stack Overflow问题的答案也应该考虑如何检查元素是否在屏幕外.
这里还有一个三元条件表达式来检查元素的状态,然后切换它:
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
- 或者,y'kno,只是摆脱整个条件并说'$('elementToToggle').toggle('slow');`...`:)`
if($('#postcode_div').is(':visible')) {
if($('#postcode_text').val()=='') {
$('#spanPost').text('\u00a0');
} else {
$('#spanPost').text($('#postcode_text').val());
}
可以创建函数以检查可见性/显示属性,以便衡量元素是否在UI中显示.
function checkUIElementVisible(element) {
return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
工作小提琴
.is(":not(':hidden')") /*if shown*/
if($('#id_element').is(":visible")){
alert('shown');
}else{
alert('hidden');
}
我搜索了这个,并没有一个答案对我的情况是正确的,所以我创建了一个函数,如果一个人的眼睛看不到元素,它将返回false
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;
}
}
});
作为hide(),show()并将toggle()内联css(display:none或display:block)附加到元素.同样,我们可以通过检查显示css轻松使用三元运算符来检查天气元素是隐藏还是可见.
更新:
- 您还需要检查元素css是否设置为可见性:"可见"或可见性:"隐藏"
- 如果显示属性设置为inline-block,block,flex,则元素也将可见.
所以我们可以检查元素的属性,使其不可见.所以他们是display: none和visibility: "hidden";
我们可以创建一个对象来检查负责隐藏元素的属性:
var hiddenCssProps = {
display: "none",
visibility: "hidden"
}
如果key的element属性与hidden属性值匹配,我们可以通过循环遍历对象匹配中的每个键值来检查.
var isHidden = false;
for(key in hiddenCssProps) {
if($('#element').css(key) == hiddenCssProps[key]) {
isHidden = true;
}
}
如果要检查元素高度:0或宽度:0或更多的属性,可以扩展此对象并向其添加更多属性并进行检查.
谢谢@Krzysztof Przygoda提醒我其他展示属性.
只需检查该元素是否可见并且它将返回一个布尔值,jQuery通过向元素添加display none来隐藏元素,因此如果您想使用纯JavaScript,您仍然可以这样做,例如:
if (document.getElementById("element").style.display === 'block') {
// your element is visible, do whatever you'd like
}
此外,您可以使用jQuery,因为您可以使用其他代码,并且您拥有较小的代码块,如下面的jQuery,为您执行相同的跟踪:
if ($(element).is(":visible")) {
// your element is visible, do whatever you'd like
};
在jQuery中使用css方法也可以产生同样的结果:
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
}
这就是jQuery在内部解决这个问题的方法:
jQuery.expr.pseudos.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
如果您不使用jQuery,您只需利用此代码并将其转换为您自己的函数:
function isVisible(elem) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
这isVisible将返回true只要该元素是可见的.
有很多方法可以检查元素在jQuery中是可见还是隐藏.
演示HTML以供参考
<div>Content</div>
<div>Content2</div>
使用可见性过滤器选择器$('element:hidden')或$('element:visible')
-
Example: $('#content2:hidden').show(); -
Example: $('#content:visible').css('color', '#EEE');
使用is()过滤
Example:
$('#content').is(":visible").css('color', '#EEE');
Or checking condition
if ($('#content').is(":visible")) {
// Perform action
}
你可以用这个:
$(element).is(':visible');
示例代码
$(document).ready(function()
{
$("#toggle").click(function()
{
$("#content").toggle();
});
$("#visiblity").click(function()
{
if( $('#content').is(':visible') )
{
alert("visible"); // Put your code for visibility
}
else
{
alert("hidden");
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<p>This is a Content</p>
<button>Toggle Content Visibility</button>
<button>Check Visibility</button>我只想澄清一下,在jQuery中,
- 它们的CSS显示值为none.
- 它们是type ="hidden"的表单元素.
- 它们的宽度和高度显式设置为0.
- 隐藏了一个祖先元素,因此该元素不会显示在页面上.
具有可见性的元素:隐藏或不透明度:0被认为是可见的,因为它们仍然占用布局中的空间.在隐藏元素的动画期间,该元素在动画结束前被视为可见.
来源::隐藏选择器| jQuery API文档
if($('.element').is(':hidden')) {
// Do something
}
这是检查标签是否可见的一些选项
// using a pure CSS selector
if ($('p:visible')) {
alert('Paragraphs are visible (checked using a CSS selector) !');
};
// using jQuery's is() method
if ($('p').is(':visible')) {
alert('Paragraphs are visible (checked using is() method)!');
};
// using jQuery's filter() method
if ($('p').filter(':visible')) {
alert('Paragraphs are visible (checked using filter() method)!');
};
// you can use :hidden instead of :visible to reverse the logic and check if an element is hidden
// if ($('p:hidden')) {
// do something
// }; 您可以在可见时添加一个类.添加一个类,show.然后检查它是否有类:
$('#elementId').hasClass('show');
如果你有这个show类,它返回true .
像这样添加CSS:
.show{ display: block; }
您可以使用
$( "div:visible" ).click(function() {
$( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
$( "div:hidden" ).show( "fast" );
});
API 文档：可见的选择器
检查隐藏元素的方法太多了.这是最好的选择(我刚推荐你):
重点是:
$('element:visible')
以及一个使用示例:
$('element:visible').show();
只需检查display属性(或visibility根据您喜欢的隐身类型).示例:
if ($('#invisible').css('display') == 'none') {
// This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
使用隐藏选择，您可以匹配所有隐藏元素
$('element:hidden')
使用可见选择，您可以匹配所有可见元素
$('element:visible')
如果您要检查元素是否在页面上可见，这取决于其母公司的知名度，你可以检查width和height元素都等于0。
jQuery
$element.width() === 0 && $element.height() === 0
香草
element.clientWidth === 0 && element.clientHeight === 0
或者
element.offsetWidth === 0 && element.offsetHeight === 0
一个 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>Hide</button>
<div>
<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>1•jQuery解决方案
确定元素在JQuery中是否可见的方法
<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>
循环遍历id'myelement'元素的所有可见 div子元素：
$("#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
使用Element.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');
如果您使用Angular，请检查：不要在Angular中使用hidden属性
用于检查元素是否可见、不显示或什至不透明度级别的扩展功能
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;
}
