繁体   English   中英

如何检查元素是否隐藏在 jQuery 中?

How do I check if an element is hidden in jQuery?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

如何使用 .hide( .hide().show().toggle()切换元素的可见性?

如何测试元素是visible还是hidden

65 个回复

由于问题涉及单个元素,因此此代码可能更合适:

// 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 的is()来检查所选元素与另一个元素、选择器或任何 jQuery 对象。 该方法遍历 DOM 元素以找到满足传递参数的匹配项。 如果匹配则返回true,否则返回false。

您可以使用hidden的选择器:

// Matches all elements that are hidden
$('element:hidden')

visible的选择器:

// Matches all elements that are visible
$('element:visible')
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

上述方法没有考虑父级的可见性。 要考虑父级,您应该使用.is(":hidden").is(":visible")

例如,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

上述方法将认为div2可见,而:visible不可见。 但是上面的方法在很多情况下可能很有用,尤其是当您需要查找隐藏的父级中是否有任何可见的错误 div 时,因为在这种情况下:visible将不起作用。

这些答案都没有解决我所理解的问题,这就是我正在寻找的问题, “我如何处理具有visibility: hidden ?” . :visible:hidden都不会处理这个问题,因为它们都在根据文档寻找显示。 据我所知,没有选择器来处理 CSS 可见性。 这是我解决它的方法(标准 jQuery 选择器,可能有更简洁的语法):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

如何确定切换元素的状态?


您可以使用:visible:hidden选择器确定元素是否折叠。

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

如果您只是根据其可见性对元素进行操作,则可以在选择器表达式中包含:visible:hidden 例如:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

通常在检查某些东西是否可见时,您会立即继续并用它做其他事情。 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" });

根据jQuery 文档:visible选择器:

  • 它们的 CSS display值为none
  • 它们是type="hidden"的表单元素。
  • 它们的宽度和高度明确设置为 0。
  • 祖先元素是隐藏的,因此该元素不会显示在页面上。

具有visibility: hiddenopacity: 0被认为是可见的,因为它们仍然占用布局中的空间。

这在某些情况下很有用,而在其他情况下则无用,因为如果你想检查元素是否可见( display != none ),忽略父母的可见性,你会发现做.css("display") == 'none'不仅更快,而且还能正确返回可见性检查。

如果你想检查可见性而不是显示,你应该使用: .css("visibility") == "hidden"

还要考虑额外的 jQuery 注释

因为:visible是一个 jQuery 扩展而不是 CSS 规范的一部分,所以使用:visible的查询不能利用原生 DOM querySelectorAll()方法提供的性能提升。 为了在使用:visible选择元素时获得最佳性能,首先使用纯 CSS 选择器选择元素,然后使用.filter(":visible")

此外,如果您担心性能,您应该检查Now you see me... show/hide performance (2010-05-04)。 并使用其他方法显示和隐藏元素。

元素可见性和 jQuery 是如何工作的

可以使用display:nonevisibility:hiddenopacity:0隐藏元素。 这些方法之间的区别:

  • display:none隐藏元素,不占空间;
  • visibility:hidden隐藏元素,但在布局中仍然占用空间;
  • opacity:0将元素隐藏为“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(); });

这对我有用,我正在使用show()hide()使我的 div 隐藏/可见:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

您也可以使用纯 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;
}

笔记:

  1. 无处不在

  2. 适用于嵌套元素

  3. 适用于 CSS 和内联样式

  4. 不需要框架

我会使用 CSS class .hide { display: none!important; } .hide { display: none!important; }

对于隐藏/显示,我调用.addClass("hide")/.removeClass("hide") 为了检查可见性,我使用.hasClass("hide")

如果您不打算使用.toggle().animate()方法,这是一种检查/隐藏/显示元素的简单明了的方法。

演示链接

 $('#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 id="clickme"> Click here </div> <img id="book" src="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>

来源(来自我的博客):

Blogger 即插即用 - jQuery 工具和小部件:如何使用 jQuery 查看元素是隐藏还是可见

可以简单地使用hiddenvisible属性,例如:

$('element:hidden')
$('element:visible')

或者您可以将其简化如下

$(element).is(":visible")

ebdiv应设置为style="display:none;" . 它适用于显示和隐藏:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});

您应该考虑的另一个答案是,如果您要隐藏一个元素,则应该使用jQuery ,但不是实际隐藏它,而是删除整个元素,而是将其HTML内容和标签本身复制到 jQuery 变量中,然后您需要做的就是测试屏幕上是否有这样的标签,使用正常的if (!$('#thetagname').length)

在 jQuery 中针对:hidden选择器测试元素时,应该考虑绝对定位的元素可能被识别为隐藏,尽管它们的子元素是可见的

首先,这似乎有点违反直觉——尽管仔细查看 jQuery 文档会给出相关信息:

元素可以被认为是隐藏的有几个原因:[...]它们的宽度和高度被明确设置为0。[...]

所以这对于盒子模型和元素的计算样式来说实际上是有意义的。 即使宽度和高度没有显式设置为 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 class="foo"> <div class="bar"></div> </div>


jQuery 3.x 的更新:

使用 jQuery 3,所描述的行为将会改变! 如果元素具有任何布局框,包括零宽度和/或高度的布局框,则元素将被视为可见。

JSFiddle 与 jQuery 3.0.0-alpha1:

http://jsfiddle.net/pM2q3/7/

相同的 JavaScript 代码将具有以下输出:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
expect($("#message_div").css("display")).toBe("none");

 $(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>

要检查它是否不可见,我使用!

if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}

或者下面也是sam,将jQuery选择器保存在一个变量中,以便在多次需要时有更好的性能:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}

使用类切换,而不是样式编辑。 . .

使用为“隐藏”元素指定的类很容易,也是最有效的方法之一。 切换Display样式为“无”的类“隐藏”将比直接编辑该样式执行得更快。 我在 Stack Overflow 问题Turning two elements visible/hidden in the same div 中非常彻底地解释了其中的一些内容。


JavaScript 最佳实践和优化

以下是 Google 前端工程师 Nicholas Zakas 的 Google Tech Talk 视频:

毕竟,没有一个例子适合我,所以我自己写了。

测试(不支持 Internet Explorer filter:alpha ):

a) 检查文档是否未隐藏

b)检查元素是否具有零宽度/高度/不透明度或display:none / visibility:hidden

c)检查元素的中心(也因为它比测试每个像素/角更快)是否没有被其他元素(以及所有祖先,例如: overflow:hidden /滚动/一个元素覆盖另一个)或屏幕边缘隐藏

d)检查元素是否具有零宽度/高度/不透明度或display:none /可见性:在计算样式中隐藏(在所有祖先中)

经测试

Android 4.4 (Native browser/Chrome/Firefox), Firefox (Windows/Mac), Chrome (Windows/Mac), Opera (Windows Presto /Mac WebKit), Internet Explorer (Internet Explorer 5-11 文档模式 + Internet Explorer 8 on a虚拟机)和 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 class="ad-placement" id="ablockercheck"></div> <div id="ablockermsg" style="display: none"></div>

“ablockercheck” 是 adblocker 阻止的 ID。 因此,检查它是否可见,您可以检测广告拦截器是否已打开。

您需要同时检查...显示和可见性:

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" id="tElement" style="display:block;">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 :visible Selector所述) - 我们可以通过这种方式检查元素是否真的可见:

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 问题How to check if an element is off-screen 的回答

可以创建一个函数来检查可见性/显示属性,以衡量元素是否显示在 UI 中。

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

工作小提琴

这里还有一个三元条件表达式来检查元素的状态,然后切换它:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
["
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
.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(显示:无或显示:块)附加到元素。 同样,我们可以很容易地使用三元运算符通过检查显示 CSS 来检查元素是隐藏还是可见。

更新:

  • 您还需要检查元素 CSS 是否设置为可见性:“可见”或可见性:“隐藏”
  • 如果显示属性设置为 inline-block、block、flex,该元素也将可见。

因此,我们可以检查使其不可见的元素的属性。 所以它们是display: nonevisibility: "hidden";

我们可以创建一个对象来检查负责隐藏元素的属性:

var hiddenCssProps = {
display: "none",
visibility: "hidden"
}

我们可以通过循环遍历对象匹配中的每个键值来检查键的元素属性是否与隐藏属性值匹配。

var isHidden = false;
for(key in hiddenCssProps) {
  if($('#element').css(key) == hiddenCssProps[key]) {
     isHidden = true;
   }
}

如果要检查元素高度:0 或宽度:0 或更多的属性,可以扩展此对象并为其添加更多属性并进行检查。

只需检查该元素是否可见,它将返回一个boolean 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 中是可见还是隐藏。

演示 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
    }

http://api.jquery.com/is/阅读更多内容

这就是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

你可以使用这个:

$(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 id="content">This is a Content</p> <button id="toggle">Toggle Content Visibility</button> <button id="visibility">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 文档:可见选择器

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,请检查: Don't use hidden attribute with Angular

检查隐藏元素的方法太多了。 这是最好的选择(我只是推荐你):

使用 jQuery,在 CSS 中创建一个元素“display:none”以隐藏。

重点是:

$('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')

一个 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>

用于检查元素是否可见、不显示甚至不透明度级别的扩展功能

如果元素不可见,则返回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;
}

公平地说,这个问题早于这个答案。

我添加它不是为了批评 OP,而是为了帮助任何仍在问这个问题的人。

确定某物是否可见的正确方法是咨询您的视图模型;

如果您不知道这意味着什么,那么您将踏上探索之旅,这将使您的工作变得更加轻松。

以下是模型-视图-视图-模型架构 (MVVM) 的概述。

KnockoutJS是一个绑定库,它可以让你在不学习整个框架的情况下尝试这些东西。

这里有一些 JavaScript 代码和一个可能可见或不可见的 DIV。

<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script>
    var vm = {
        IsDivVisible: ko.observable(true);
    }
    vm.toggle = function(data, event) {
      // Get current visibility state for the div
      var x = IsDivVisible();
      // Set it to the opposite
      IsDivVisible(!x);
    }
    ko.applyBinding(vm);
</script>
<div data-bind="visible: IsDivVisible">Peekaboo!</div>
<button data-bind="click: toggle">Toggle the div's visibility</button>
</body>
</html>

请注意,toggle 函数不会参考 DOM 来确定 div 的可见性; 它咨询视图模型。

如果你想检查一个元素在页面上是否可见,根据其父元素的可见性,你可以检查元素的widthheight是否都等于0

jQuery

$element.width() === 0 && $element.height() === 0

香草

element.clientWidth === 0 && element.clientHeight === 0

或者

element.offsetWidth === 0 && element.offsetHeight === 0

有两种方法可以检查元素的可见性。

解决方案#1

if($('.selector').is(':visible')){
    // element is visible
}else{
    // element is hidden
}

解决方案#2

if($('.selector:visible')){
    // element is visible
}else{
    // element is hidden
}

尝试:

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

您可以通过切换类在可见或隐藏时使用 CSS 类:

.show{ display :block; }

设置你的 jQuery toggleClass()addClass()removeClass(); .

举个例子,

jQuery('#myID').toggleClass('show')

上面的代码将在元素没有show时添加show css 类,当元素有show类时将删除。

当你检查它是否可见时,你可以按照这个 jQuery 代码,

jQuery('#myID').hasClass('show');

#myID元素有我们的类( show )时,上面的代码将返回一个布尔值(true),当它没有( show )类时返回false。

isHidden = function(element){
    return (element.style.display === "none");
};

if(isHidden($("element")) == true){
    // Something
}

使用任何可见的选择器或隐藏的选择器来检查可见性:

  1. 使用:visible 选择器 - jQuery( ":visible" )
  2. 使用 :hidden 选择器 - jQuery( ":hidden" )

使用.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>

if($("h1").is(":hidden")){
    // your code..
}

您可以使用 jQuery 的is()函数来检查所选元素是否可见或隐藏。 该方法遍历 DOM 元素以找到满足传递参数的匹配项。 如果匹配则返回 true,否则返回 false。

<script>
    ($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>
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>

这个问题最简单的答案是这样的:

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}

不要为每个element编写一个event ,而是这样做:

$('div').each(function(){
  if($(this).css('display') === 'none'){
    $(this).css({'display':'block'});
  }
});

您也可以在输入上使用它:

$('input').each(function(){
  if($(this).attr('type') === 'hidden'){
    $(this).attr('type', 'text');
  }
});

下面的代码检查一个元素在 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.");
                }
            });
        });
   hideShow(){
  $("#accordionZiarat").hide();
  // Checks CSS content for display:[none|block], ignores visibility:[true|false]
  if ($("#accordionZiarat").is(":visible")) {
    $("#accordionZiarat").hide();
  }

  
  else if ($("#accordionZiarat").is(":hidden")) {
    $("#accordionZiarat").show();
  }

  else{

  }
$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
if($(element).is(":visible")) {
  console.log('element is visible');
} else {
  console.log('element is not visible');
}

你可以试试这个

$(document).ready(function() {
   var view = $(this).is(':visible');

   if(view) {
      alert("view");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});

如果你隐藏在课堂上 - d-none

if (!$('#ele').hasClass('d-none')) {
        $('#ele').addClass('d-none'); //hide 

    }


  
1 jQuery如何不断检查元素是否隐藏/可见?

我的网站上有一些HTML5视频(在滑块内),它们每隔x秒自动循环一次(或者当用户点击“下一张幻灯片”时)。 我想停止用户实际看不到的视频,任何想法如何实现? 我尝试做类似的事情,但我猜有“每个”都缺失了,而且它总是在点击之后一直工作(好吧,实际上它不起作用因为“这个”在这里使用错了我 ...

2 jQuery:检查是否从用户隐藏了元素

如何检查用户是否隐藏了特定元素? 在我的代码中,在某些情况下,该代码将被称为: 因此,我必须确保如果$("#VersionSelectField")是隐藏的,那么提交表单时,我就不必验证其中的值(为此,我使用JQuery Validate库 )。 有任何想法吗? ...

2009-07-06 04:44:51 4 57889   jquery
3 检查元素是否被溢出隐藏:隐藏的JQuery / JavaScript

我有一个日历,其中包含每天的活动列表。 目前,我每天最多显示3个事件,并允许用户切换以展开列表。 我用overflow:hidden和max-height:XXpx属性隐藏列表。 我正在尝试检测当前隐藏在该列表中的事件。 我环顾四周,找不到任何可以检测到这一点的东西 我努力 ...

4 如何在 selenium 中检查隐藏元素是否显示

我有一个接受数字的输入字段。 我需要输入数字并检查是否显示错误消息。 输入无效号码时会显示错误消息。 我还需要检查当我输入有效数字时是否显示错误消息,但我得到NoSuchElementException异常。 下面的 HTML 代码是不显示错误消息的情况。 显示错误信息时的 HTML 代码如下 我用 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM