如何检查jQuery中是否隐藏了一个元素？

Question

是可能的切换元件的可见性,使用函数.hide(),.show()或.toggle().

如何测试元素是可见还是隐藏？

Answer 1

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

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

与twernt的建议相同,但适用于单个元素; 它与jQuery FAQ中推荐的算法相匹配

Answer 2

您可以使用hidden选择器:

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

而visible选择器:

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

Answer 3

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不起作用.

Answer 4

这些答案都没有解决我所理解的问题,这就是我正在寻找的问题,"我该如何处理有问题的物品visibility: hidden？" .既:visible不会也:hidden不会处理这个,因为他们都在寻找文档显示.据我所知,没有选择器来处理CSS可见性.以下是我如何解决它(标准的jQuery选择器,可能有更简洁的语法):

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

Answer 5

从如何确定切换元素的状态？

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

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

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

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

Answer 6

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

Answer 7

:visible根据jQuery文档的选择器:

• 它们的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).并使用其他方法来显示和隐藏元素.

Answer 8

这对我的作品,和我使用show(),并hide()让我的DIV隐藏/可见:

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

Answer 9

元素可见性和jQuery如何工作 ;

元素可以隐藏display:none,visibility:hidden或opacity: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();
  });
  

Answer 10

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

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

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

Answer 11

您也可以使用纯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. 不需要框架

Answer 12

演示链接

$('#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 Plug n Play - jQuery工具和小部件:如何使用jQuery查看元素是隐藏还是可见

Answer 13

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

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

或者你可以简化同样是如下.

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

Answer 14

ebdiv应该设置为style="display:none;".它适用于show和hide:

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

Answer 15

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

Answer 16

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

这首先看起来有些违反直觉 - 虽然仔细查看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/

然后,相同的JS将具有此输出:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false

Answer 17

这可能有效:

expect($("#message_div").css("display")).toBe("none");

Answer 18

例:

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

Answer 19

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

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

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

var $book = $('#book')

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

Answer 20

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

使用指定用于"隐藏"元素的类很容易,也是最有效的方法之一.使用Display'none'样式切换'hidden'类比直接编辑该样式要快.我在Stack Overflow问题中详细解释了其中的一些问题.在同一个div中转换两个元素可见/隐藏.

JavaScript最佳实践和优化

以下是Google前端工程师Nicholas Zakas撰写的Google Tech Talk的真实启发视频:

• 加快你的Javascript(YouTube)

Answer 21

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

测试(不支持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

Answer 22

激活使用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.因此,检查它是否可见,您可以检测adblocker是否已打开.

Answer 23

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

if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}

如果我们检查$(this).is(":visible"),jQuery会自动检查这两件事.

Answer 24

也许你可以做这样的事情

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

Answer 25

只需通过检查布尔值来检查可见性,例如:

if (this.hidden === false) {
    // Your code
}

我为每个函数使用了这个代码.否则,您可以使用它is(':visible')来检查元素的可见性.

Answer 26

因为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;
    }
});

Answer 27

但是如果元素的CSS如下所示呢？

.element{
    position: absolute;left:-9999;    
}

所以这个Stack Overflow问题的答案也应该考虑如何检查元素是否在屏幕外.

Answer 28

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

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });

Answer 29

if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}

Answer 30

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

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

工作小提琴

Answer 31

.is(":not(':hidden')") /*if shown*/

Answer 32

if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}

Answer 33

我搜索了这个,并没有一个答案对我的情况是正确的,所以我创建了一个函数,如果一个人的眼睛看不到元素,它将返回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;
    }
  }  
});

Answer 34

作为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提醒我其他展示属性.

Answer 35

只需检查该元素是否可见并且它将返回一个布尔值,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
}

Answer 36

这就是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只要该元素是可见的.

Answer 37

有很多方法可以检查元素在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/

Answer 38

你可以用这个:

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

Answer 39

我只想澄清一下,在jQuery中,

元素可被视为隐藏,原因如下:

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

具有可见性的元素:隐藏或不透明度:0被认为是可见的,因为它们仍然占用布局中的空间.在隐藏元素的动画期间,该元素在动画结束前被视为可见.

来源::隐藏选择器| jQuery API文档

if($('.element').is(':hidden')) {
  // Do something
}

Answer 40

这是检查标签是否可见的一些选项

 // 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  
   // };  

Answer 41

您可以在可见时添加一个类.添加一个类,show.然后检查它是否有类:

$('#elementId').hasClass('show');

如果你有这个show类,它返回true .

像这样添加CSS:

.show{ display: block; }

Answer 42

您可以使用

$( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});

API 文档：可见的选择器

Answer 43

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

使用jQuery,在CSS中创建一个元素"display:none",用于隐藏.

重点是:

$('element:visible')

以及一个使用示例:

$('element:visible').show();

Answer 44

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

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>

Answer 45

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

解决方案#1

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

解决方案#2

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

Answer 46

只需检查display属性(或visibility根据您喜欢的隐身类型).示例:

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}

Answer 47

使用隐藏选择，您可以匹配所有隐藏元素

$('element:hidden')

使用可见选择，您可以匹配所有可见元素

$('element:visible')

Answer 48

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

我添加它不是为了批评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>

请注意，切换函数不会参考 DOM 来确定 div 的可见性；它查阅视图模型。

Answer 49

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

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

Answer 50

如果您要检查元素是否在页面上可见，这取决于其母公司的知名度，你可以检查width和height元素都等于0。

jQuery

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

香草

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

或者

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

Answer 51

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

Answer 52

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属性

Answer 53

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

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;
}