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:visible

您可以使用隐藏的选择器：

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

和可见的选择器：

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

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

// 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。

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

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

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

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

如果只是根据元素的可见性对元素执行操作，则可以在选择器表达式中包含 或。例如：:visible:hidden

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

这些答案都没有解决我所理解的问题，也就是我一直在寻找的问题，“我如何处理具有可见性的项目：隐藏？两者都不会处理这个问题，因为他们都在根据文档寻找显示。据我所知，没有选择器来处理CSS可见性。这是我解决它的方法（标准的jQuery选择器，可能有更浓缩的语法）：:visible:hidden

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

这对我有用，我正在使用 并使我的 div 隐藏/可见：show()hide()

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

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

• 它们的 CSS 值为 。displaynone
• 它们是带有 的表单元素。type="hidden"
• 它们的宽度和高度显式设置为 0。
• 上级元素是隐藏的，因此该元素不会显示在页面上。

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

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

如果要检查可见性而不是显示，则应使用：。.css("visibility") == "hidden"

还要考虑其他 jQuery 注释：

由于是 jQuery 扩展，而不是 CSS 规范的一部分，因此使用查询无法利用本机 DOM 方法提供的性能提升。要在用于选择元素时获得最佳性能，请首先使用纯 CSS 选择器选择元素，然后使用 .:visible:visiblequerySelectorAll():visible.filter(":visible")

另外，如果您担心性能，您应该检查现在你看到我...显示/隐藏性能 （2010-05-04）.并使用其他方法来显示和隐藏元素。

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

对于隐藏/展示，我打电话给.为了检查可见性，我使用 ..addClass("hide")/.removeClass("hide").hasClass("hide")

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

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

元素可见性和 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();
  });
  

可以简单地使用 or 属性，例如：hiddenvisible

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

或者您可以将其简化为如下所示。

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

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

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

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

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

演示链接

$('#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 查看元素是隐藏还是可见

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

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

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

var $book = $('#book')

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

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

使用指定用于“隐藏”元素的类很容易，也是最有效的方法之一。将类切换为“隐藏”的样式为“无”将比直接编辑该样式的执行速度更快。我在 Stack Overflow 问题中非常彻底地解释了其中的一些内容：将两个元素在同一个 div 中可见/隐藏。Display

JavaScript 最佳实践和优化

以下是 Google 前端工程师 Nicholas Zakas 的 Google Tech Talk 视频，内容非常有启发性：

• 加速您的 Javascript （YouTube）

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

此外，这里还有一个三元条件表达式，用于检查元素的状态，然后切换它：

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

您需要同时检查两者。显示和可见性：

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

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

因为（如jQuery ：visible Selector所述） - 我们可以以这种方式检查元素是否真的可见：Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout

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

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

测试（不支持 Internet Explorer）：filter:alpha

a） 检查文档是否未隐藏

b） 检查元素的宽度/高度/不透明度或/内联样式是否为零display:nonevisibility:hidden

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

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

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

在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 时，所描述的行为将发生变化！如果元素具有任何布局框（包括宽度和/或高度为零的布局框），则这些元素将被视为可见。

使用 jQuery 3.0.0-alpha1 的 JSFiddle：

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

然后，相同的 JavaScript 代码将具有以下输出：

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

只需通过检查布尔值来检查可见性，例如：

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

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

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

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

因此，还应该考虑 Stack Overflow 问题的答案：如何检查元素是否在屏幕外。

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

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

工作小提琴

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

激活了对广告拦截器使用可见检查的示例：

$(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”是广告拦截器拦截的 ID。因此，检查它是否可见，您可以检测广告拦截器是否已打开。

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

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

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

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

当类可见时，您可以只添加该类。添加类 .然后检查它是否有一个类：show

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

如果您有该类，则返回 true。show

像这样添加 CSS：

.show{ display: block; }

这就是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 );
};

只要元素可见，它就会返回。isVisibletrue

您可以使用以下命令：

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

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

As ，并将内联 css（display：none 或 display：block）附加到元素。 同样，我们可以很容易地使用三元运算符，通过检查显示 CSS 来检查元素是隐藏的还是可见的。hide()show()toggle()

更新：

• 您还需要检查元素 CSS 是否设置为 visibility： “visible” 或 visibility： “hidden”
• 如果 display 属性设置为 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;
   }
}

如果要检查元素 height： 0 或 width： 0 或更多等属性，可以扩展此对象并向其添加更多属性，并且可以检查。

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

API 文档：可见选择器

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

由于以下几个原因，可以认为元素是隐藏的：

• 它们的 CSS 显示值为 none。
• 它们是 type=“hidden” 的表单元素。
• 它们的宽度和高度显式设置为 0。
• 上级元素是隐藏的，因此该元素不会显示在页面上。

可见性为：隐藏或不透明度：0 的元素被视为可见，因为它们仍会占用布局中的空间。在隐藏元素的动画期间，该元素被视为可见，直到动画结束。

来源： ：hidden Selector | jQuery API 文档

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

有很多方法可以检查元素在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，在CSS中创建一个元素“display：none”，用于隐藏。

关键是：

$('element:visible')

以及一个使用示例：

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

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

我添加它不是为了批评 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 的可见性;它咨询视图模型。

$("someElement").on("click", function () {
    $("elementToToggle").is(":visible");
});

只需检查该元素是否可见，它就会返回一个布尔值。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
}

只需检查属性（或取决于您喜欢的隐身类型）。例：displayvisibility

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

您可以通过切换类来使用可见或隐藏的 CSS 类：

.show{ display :block; }

设置 jQuery 或 或 .toggleClass()addClass()removeClass();

举个例子，

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

上面的代码将在元素没有时添加 css 类，并在有类时删除。showshowshow

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

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

当元素有我们的类 （） 时，上面的代码将返回布尔值 （true），当它没有 （） 类时，将返回 false。#myIDshowshow

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

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

与其为每一个人写一个，不如这样做：eventelement

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

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

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

如果要检查某个元素在页面上是否可见，则可以检查该元素是否都等于 ，具体取决于其父元素的可见性。widthheight0

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

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 中使用隐藏属性

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的函数来检查所选元素的可见或隐藏。此方法沿 DOM 元素遍历以查找匹配项，该匹配项满足传递的参数。如果存在匹配项，它将返回 true，否则返回 false。is()

<script>
    ($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>

下面的代码检查元素在jQuery中是隐藏的还是可见的：

$("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.");
        }
    });
});

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

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

   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{

  }

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

$('element:hidden')

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

$('element:visible')

if ($(element).is(":visible")) {
    console.log("element is visible");
} else {
    console.log("element is not visible");
}

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

解决方案#1

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

解决方案#2

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

如果您使用的是 Bootstrap，则可以使用 class 隐藏任何元素。d-none

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

这个问题最简单的答案是：

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

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

1. 使用 ：visible 选择器 - jQuery（ “：visible” ）
2. 使用 ：hidden 选择器 - jQuery（ “：hidden” ）

use .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>

你可以试试这个：

$(document).ready(function () {
    var view = $(this).is(":visible");
    if (view) {
        alert("view");
        // Code
    } else {
        alert("hidden");
    }
});