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

您可以使用#0选择器：

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

#0选择器：

// 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");

它与匹配jQuery FAQ中推荐的算法78386">特恩特的建议相同，但应用于单个元素；它匹配jQuery FAQ中推荐的算法。

我们使用jQuery的是（）来检查所选元素与另一个元素、选择器或任何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');

这些答案都没有解决我所理解的问题，这就是我正在寻找的，“如何处理具有#0的项目？”。:visible和:hidden都不会处理这个问题，因为它们都在寻找每个留档的显示。据我所知，没有选择器来处理CSS可见性。这是我如何解决它的（标准的jQuery选择器，可能有更浓缩的语法）：

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

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

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

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

• 它们的CSSdisplay值为none。
• 它们是具有type="hidden"的表单元素。
• 它们的宽度和高度显式设置为0。
• 祖先元素被隐藏，因此该元素不会显示在页面上。

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

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

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

同时考虑额外的jQuery笔记：

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

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

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

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

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

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

如何元素可见性和jQuery工程；

元素可以使用display:none、visibility:hidden或opacity:0隐藏。这些方法之间的区别：

• display:none隐藏元素，它不占用任何空间；
• visibility:hidden隐藏元素，但它仍然占用布局中的空间；

• opacity:0将元素隐藏为“可见性：隐藏”，它仍然占用布局中的空间；唯一的区别是不透明度可以使元素部分透明；

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

可以简单地使用hidden或visible属性，例如：

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

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

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

JavaScript最佳实践和优化

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

• 加快你的JavaScript（YouTube）

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

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

您需要检查…显示和可见性：

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

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

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

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

测试（不支持Internet Explorerfilter:alpha）：

a）检查文档是否未隐藏

b）检查元素是否具有零宽度/高度/不透明度或内联样式中的display:none/visibility:hidden

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

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

测试在

Android 4.4（本地浏览器/Chrome /Firefox）、Firefox（Windows/Mac）、Chrome（Windows/Mac）、Opera（WindowsPresto/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。

因此，这实际上对于元素的box模型和计算样式是有意义的。即使宽度和高度没有设置为明确到0，它们也可能设置为隐含。

看看下面的例子：

console.log($('.foo').is(':hidden')); // trueconsole.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')); // falseconsole.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'));}

工作小提琴

示例使用可见检查ad的拦截器被激活：

$(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，它会被adblock ker阻止。所以检查它是否可见，你就可以检测到adblock ker是否打开了。

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

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

 // using a pure CSS selectorif ($('p:visible')) {alert('Paragraphs are visible (checked using a CSS selector) !');};  
// using jQuery's is() methodif ($('p').is(':visible')) {alert('Paragraphs are visible (checked using is() method)!');};  
// using jQuery's filter() methodif ($('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');

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

像这样添加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 );};

只要元素可见，哪个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>

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

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

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

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

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

如果您想检查元素高度：0或宽度：0或更多之类的属性，您可以扩展此对象并向其添加更多属性并可以检查。

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

API文档：可见选择器

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

元素可以被认为是隐藏的，原因有几个：

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

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

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

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

有很多方法可以检查元素在jQuery中是可见的还是隐藏的。

演示超文本标记语言示例参考

<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'): Selects all elements that are visible.

  Example:$('#content:visible').css('color', '#EEE');

Read more at http://api.jquery.com/category/selectors/visibility-filter-selectors/

Use is() Filtering

    Example:$('#content').is(":visible").css('color', '#EEE');
Or checking conditionif ($('#content').is(":visible")) {// Perform action}

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

检查隐藏元素的方法太多了。这是最好的选择（我刚刚推荐你）：

使用jQuery，在CSS中创建一个元素“显示：无”以进行隐藏。

重点是：

$('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 divvar x = IsDivVisible();// Set it to the oppositeIsDivVisible(!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通过向元素添加显示无来隐藏元素，因此如果您想使用纯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}

只需检查display属性（或visibility，具体取决于您喜欢哪种隐形）。示例：

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

当CSS类可见或隐藏时，您可以通过切换类来使用它：

.show{ display :block; }

设置您的jQuerytoggleClass()或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}

不要为每个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');}});

如果要检查元素是否在页面上可见，取决于其父元素的可见性，您可以检查元素的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 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'my元素'元素的所有可见 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的is()函数来检查选定的元素可见或隐藏。此方法遍历DOM元素以找到满足传递参数的匹配项。如果有匹配项，它将返回true，否则返回false。

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

下面的代码检查元素是否隐藏在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 completedif($("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}

如果你和D级无名小卒一起躲起来

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

  

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

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

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

1. 使用：可见选择器-jQuery（"：可见"）
2. 使用：隐藏选择器-jQuery（"：隐藏"）

use. toggle（）-显示和隐藏元素

function checkVisibility() {// check if element is hidden or not and return true falseconsole.log($('#element').is(':hidden'));
// check if element is visible or not and return true falseconsole.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");}});