Как проверить, скрыт ли элемент в jQuery?

Можно переключить видимость элемента, используя функции .hide() , .show() или .toggle() .

Как бы вы проверили, является ли элемент видимым или скрытым?

вопрос задан 7.10.2008

Philip Morton

53657 репутация

52 ответов

8442 рейтинг
Поскольку вопрос относится к одному элементу, этот код может быть более подходящим:
```
 // Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 
 
```
То же, что и предложение twernt , но применяется к одному элементу; и он соответствует алгоритму, рекомендованному в FAQ jQuery
ответ дан Tsvetomir Tsonev, с репутацией 87872, 7.10.2008
1292 рейтинг
Вы можете использовать селектор hidden :
```
 // Matches all elements that are hidden
$('element:hidden')
 
```
И visible селектора:
```
 // Matches all elements that are visible
$('element:visible')
 
```
ответ дан twernt, с репутацией 16299, 7.10.2008
806 рейтинг
```
 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 нет. Но вышеупомянутое может быть полезно во многих случаях, особенно если вам нужно найти, есть ли какие-либо ошибки divs, видимые в скрытом родителе, потому что в таких условиях :visible не будет работать.
ответ дан Mote, с репутацией 8297, 7.10.2008
462 рейтинг
Ни один из этих ответов не касается того, что я понимаю, и это вопрос, который я искал: «Как обрабатывать элементы с visibility: hidden ?» , Ни :visible ни :hidden не справятся с этим, поскольку они оба ищут отображение в документации. Насколько я могу судить, нет селектора для обработки видимости CSS. Вот как я его разрешил (стандартные селектора jQuery, может быть более сжатый синтаксис):
```
 $(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
 
```
ответ дан aaronLile, с репутацией 4657, 24.03.2011
331 рейтинг
From Как определить состояние переключаемого элемента?
Вы можете определить, сгенерирован ли элемент или нет, с помощью селекторов :visible и :hidden .
```
 var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
 
```
Если вы просто воздействуете на элемент на основе его видимости, вы можете просто включить :visible или :hidden в выражении селектора. Например:
```
  $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
 
```
ответ дан user574889, с репутацией 3319, 13.01.2011
243 рейтинг
Часто, проверяя, что-то видимо или нет, вы немедленно пойдете прямо вперед и сделаете что-то еще с ним. Цепочка 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" });
 
```
ответ дан Simon_Weaver, с репутацией 68158, 25.07.2009
198 рейтинг
Селектор :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). И используйте другие методы для отображения и скрытия элементов.
ответ дан Pedro Rainho, с репутацией 3368, 25.11.2011
178 рейтинг
Это работает для меня, и я использую show() и hide() чтобы сделать мой div скрытым /видимым:
```
 if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
 
```
ответ дан Abiy, с репутацией 1813, 6.07.2011
174 рейтинг
Как видимость элементов и 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(); });
ответ дан webvitaly, с репутацией 2724, 24.04.2012
139 рейтинг

Я бы использовал CSS класс .hide { display: none!important; } .
Для сокрытия /показа, я звоню .addClass("hide")/.removeClass("hide") . Для проверки видимости я использую .hasClass("hide") .
Это простой и понятный способ проверить /скрыть /показать элементы, если вы не планируете использовать .toggle() или .animate() метода.

ответ дан Evgeny Levin, с репутацией 4322, 3.02.2012

134 рейтинг

Вы также можете сделать это, используя простой 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;
}

Заметки:

Работает везде
Работает для вложенных элементов
Работает для CSS и встроенных стилей
Не требует рамок

ответ дан Matt Brock, с репутацией 4442, 16.07.2012

113 рейтинг
Можно просто использовать атрибут hidden или visible , например:
```
 $('element:hidden')
$('element:visible')
 
```
Или вы можете упростить то же самое, что и в следующем.
```
 $(element).is(":visible")
 
```
ответ дан ScoRpion, с репутацией 6978, 23.05.2012
103 рейтинг

Другой ответ, который вы должны учесть, это то, что если вы скрываете элемент, вы должны использовать jQuery , но вместо того, чтобы скрывать его, вы удаляете весь элемент, но вы копируете его содержимое HTML и сам тег в переменную jQuery, а затем все, что вам нужно сделать, это проверить, есть ли такой тег на экране, используя нормальный if (!$('#thetagname').length) .

ответ дан think123, с репутацией 10191, 21.04.2012

99 рейтинг

 $('#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="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

Источник:

Blogger Plug n Play - Инструменты и виджеты jQuery: как увидеть скрытый или видимый элемент с помощью jQuery

jsFiddle:

JSFiddle - ipsjolly - k4WWj

ответ дан Code Spy, с репутацией 2916, 25.01.2013

94 рейтинг
ebdiv должно быть установлено равным style="display:none;" . Это работает для шоу и скрыть:
```
 $(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
 
```
ответ дан Vaishu, с репутацией 1577, 13.06.2012
81 рейтинг
При тестировании элемента против селектора :hidden в jQuery следует учитывать, что абсолютный позиционный элемент может быть распознан как скрытый, хотя их дочерние элементы видны .
В первую очередь это кажется несколько противоречащим интуиции - хотя более пристальный взгляд на документацию jQuery дает соответствующую информацию:
Элементы можно считать скрытыми по нескольким причинам: [...] Их ширина и высота явно установлены в 0. [...]
Таким образом, это действительно имеет смысл в отношении box-model и вычисленного стиля для элемента. Даже если ширина и высота не заданы явно 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>
UPDATE FOR 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
 
```
ответ дан conceptdeluxe, с репутацией 2639, 6.05.2014
78 рейтинг
Это может работать:
```
 expect($("#message_div").css("display")).toBe("none");
 
```
ответ дан Maneesh Kumar, с репутацией 967, 20.07.2012

58 рейтинг

Пример:

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

ответ дан Irfan DANISH, с репутацией 4677, 28.10.2013

58 рейтинг
Чтобы проверить, не видно ли это, я использую ! :
```
 if ( !$('#book').is(':visible')) {
    alert('#book is not visible')
}
 
```
Или следующее также является sam, сохраняя селектор jQuery в переменной, чтобы иметь лучшую производительность, когда вам это нужно несколько раз:
```
 var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
 
```
ответ дан Matthias Wegtun, с репутацией 1066, 4.06.2013
56 рейтинг
Используйте переключение классов, а не редактирование стиля. , ,
Использование классов, предназначенных для «скрытия» элементов, является простым, а также одним из наиболее эффективных методов. Переключение класса 'hidden' с типом Display не будет выполняться быстрее, чем редактирование этого стиля напрямую. Я объяснил некоторые из этого довольно подробно в вопросе переполнения стека. Поворот двух элементов, видимых /скрытых в одном div .
Рекомендации и оптимизация JavaScript
Вот поистине просветительский видеоролик Google Tech Talk от главного инженера Google Николаса Закаса:
- Ускорьте свой Javascript (YouTube)
ответ дан Lopsided, с репутацией 3205, 18.07.2013
54 рейтинг
Пример использования видимой проверки для рекламного блока активирован:
$(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» - это идентификатор, который блокирует рекламный блок. Поэтому, проверяя, видно ли это, вы можете определить, включен ли рекламный блок.
ответ дан Roman Losev, с репутацией 1396, 27.04.2015

53 рейтинг

В конце концов, ни один из примеров не подходит мне, поэтому я написал свой собственный.

Тесты (без поддержки Internet Explorer filter:alpha ):

a) Проверьте, не скрыт ли документ

б) Проверьте , если элемент имеет нулевой ширина /высота /непрозрачность или display:none /visibility:hidden в встроенных стилей

c) Убедитесь, что центр (также потому, что он быстрее, чем тестирование каждого пикселя /угла) элемента не спрятан другим элементом (и всеми предками, например: overflow:hidden /прокрутка /один элемент поверх enother) или краями экрана

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

ответ дан Aleko, с репутацией 820, 9.04.2014

49 рейтинг
Вам нужно проверить оба ... Показать, а также видимость:
```
 if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
    // The element is not visible
} else {
    // The element is visible
}
 
```
Если мы проверим на $(this).is(":visible") , jQuery проверяет оба события автоматически.
ответ дан Premshankar Tiwari, с репутацией 2259, 31.01.2014

37 рейтинг

Может быть, вы можете сделать что-то подобное

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

ответ дан Mathias Stavrou, с репутацией 650, 7.04.2015

31 рейтинг
Поскольку 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;
    }
});
 
```
ответ дан Andron, с репутацией 4539, 19.03.2014

29 рейтинг

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

ответ дан Gaurav, с репутацией 343, 15.11.2013

29 рейтинг
Но что, если CSS элемента выглядит следующим образом?
```
 .element{
    position: absolute;left:-9999;    
}
 
```
Таким образом, этот ответ на вопрос о переполнении стека. Как проверить, является ли элемент вне экрана, также следует учитывать.
ответ дан RN Kushwaha, с репутацией 1419, 23.08.2014
28 рейтинг
Просто проверьте видимость, проверив логическое значение, например:
```
 if (this.hidden === false) {
    // Your code
}
 
```
Я использовал этот код для каждой функции. В противном случае вы можете использовать is(':visible') для проверки видимости элемента.
ответ дан pixellabme, с репутацией 397, 11.08.2014
28 рейтинг
Функция может быть создана для проверки атрибутов видимости /отображения, чтобы определить, отображается ли элемент в пользовательском интерфейсе или нет.
```
 function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
 
```
Рабочий скрипт
ответ дан V31, с репутацией 6887, 29.08.2014
27 рейтинг
Также здесь есть тернарное условное выражение для проверки состояния элемента, а затем для его переключения:
```
 $('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
 
```
ответ дан cssimsek, с репутацией 831, 5.11.2013
23 рейтинг
```
.is(":not(':hidden')") /*if shown*/
```
ответ дан Kareem, с репутацией 2160, 12.04.2014

19 рейтинг

Я искал это, и ни один из ответов не подходит для моего случая, поэтому я создал функцию, которая вернет 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;
    }
  }  
});

ответ дан lmcDevloper, с репутацией 307, 1.06.2016

16 рейтинг
```
if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}
```
ответ дан Prabhagaran, с репутацией 2071, 18.08.2015
15 рейтинг
Так 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 до тех пор, пока элемент будет виден.
ответ дан Oriol, с репутацией 3477, 12.04.2016
13 рейтинг
Существует несколько способов проверить, является ли элемент видимым или скрытым в 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/
ответ дан Arun Karnawat, с репутацией 400, 13.12.2016

12 рейтинг

Вы можете использовать это:

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

ответ дан Abrar Jahin, с репутацией 5798, 2.05.2016

12 рейтинг
Просто проверьте, является ли этот элемент видимым, и он вернет логическое , jQuery скрыть элементы, добавив отображение 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
};
 
```
Также использование метода css в jQuery может привести к тому же:
```
 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
}
 
```
ответ дан Alireza, с репутацией 39782, 6.05.2017
12 рейтинг
Поскольку hide() , show() и toggle() присоединяют к элементу встроенный css (display: none или display: block). Аналогично, мы можем легко использовать трехмерный оператор для проверки погодного элемента, который скрыт или видим, проверив отображение css.
ОБНОВИТЬ:
- Вам также необходимо проверить, установлен ли элемент css на видимость: «видимый» или видимость: «скрытый»
- Элемент будет также виден, если свойство отображения установлено на встроенный блок, блок, 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 или более, вы можете расширить этот объект и добавить к нему больше свойства и проверить его.
Спасибо @Krzysztof Przygoda за то, что напомнили мне другие свойства дисплея.
ответ дан No one, с репутацией 768, 5.11.2016

11 рейтинг

Это некоторая возможность проверить, что тег виден или нет.

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

ответ дан Sangeet Shah, с репутацией 1685, 24.08.2015

9 рейтинг
Я просто хочу уточнить, что в jQuery,
Элементы можно считать скрытыми по нескольким причинам:
У них нет значения отображения в CSS.
Это элементы формы с типом = «скрытые».
Их ширина и высота явно установлены в 0.
Элемент предка скрыт, поэтому элемент не отображается на странице.
Элементы с видимостью: скрытые или непрозрачные: 0 считаются видимыми, поскольку они все еще потребляют пространство в макете. Во время анимаций, которые скрывают элемент, элемент считается видимым до конца анимации.
Источник:: скрытый селектор | Документация API jQuery
```
 if($('.element').is(':hidden')) {
  // Do something
}
 
```
ответ дан Sky Yip, с репутацией 651, 6.12.2016
8 рейтинг
Вы можете просто добавить класс, когда он будет виден. Добавьте класс, show . Затем проверьте, есть ли у него класс:
```
 $('#elementId').hasClass('show');
 
```
Он возвращает true, если у вас есть класс show .
Добавьте CSS следующим образом:
```
 .show{ display: block; }
 
```
ответ дан Sahan, с репутацией 297, 4.04.2016
6 рейтинг
Существует слишком много способов проверки скрытых элементов. Это лучший выбор (я только что вам рекомендовал):
Используя jQuery, создайте элемент «display: none» в CSS для скрытия.
Дело в том:
```
 $('element:visible')
 
```
И пример использования:
```
 $('element:visible').show();
 
```
ответ дан Abdul Aziz Al Basyir, с репутацией 542, 20.03.2017
4 рейтинг
Вы можете использовать
```
 $( "div:visible" ).click(function() {
  $( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
  $( "div:hidden" ).show( "fast" );
});
 
```
Документация API: https://api.jquery.com/visible-selector/
ответ дан Wolfack, с репутацией 923, 1.12.2016
4 рейтинг
Просто проверьте атрибут display (или visibility зависимости от того, какую именно невидимость вы предпочитаете). Пример :
```
 if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
 
```
ответ дан Antoine Auffray, с репутацией 438, 8.08.2017
3 рейтинг
```
if($("h1").is(":hidden")){
    // your code..
}
```
ответ дан cbertelegni, с репутацией 335, 23.03.2016
1 рейтинг

В некоторых случаях, если вы хотите проверить, является ли элемент видимым на странице, в зависимости от видимости его патента, вы можете проверить, равен ли width и height элемента, равным 0 , оба.
JQuery
$element.width() === 0 && $element.height() === 0

ваниль
element.clientWidth === 0 && element.clientHeight === 0

Или
element.offsetWidth === 0 && element.offsetHeight === 0

ответ дан Profesor08, с репутацией 575, 15.08.2018
0 рейтинг
Вы можете использовать класс css, когда он отображается или скрывается, переключая класс.
```
 .show{ display :block; }
 
```
Установите jQuery toggleClass() или addClass() или removeClass(); .
В качестве примера,
jQuery('#myID').toggleClass('show')

Вышеприведенный код добавит show css-классов, когда элемент не имеет show и удалит, когда у него есть show класс.
И когда вы проверяете, видимо это или нет, вы можете следовать этому коду jQuery,
jQuery('#myID').hasClass('show');

Выше код вернет логическое значение (true), когда #myID элементов имеют наш класс ( show ) и false, если у него нет класса ( show ).
ответ дан Sahan, с репутацией 297, 26.09.2017
0 рейтинг
Вместо того, чтобы писать event для каждого element , сделайте следующее:
```
 $('div').each(function(){
  if($(this).css('display') === 'none'){
    $(this).css({'display':'block'});
  }
});
 
```
Также вы можете использовать его на входах:
```
 $('input').each(function(){
  if($(this).attr('type') === 'hidden'){
    $(this).attr('type', 'text');
  }
});
 
```
ответ дан Judah rogan, с репутацией 75, 29.07.2018

0 рейтинг

Вы можете сделать это:

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

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

ответ дан Judah rogan, с репутацией 75, 22.12.2017

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>

ответ дан Muhammad, с репутацией 1946, 12.09.2018

Как проверить, скрыт ли элемент в jQuery?

52 ответов

Используйте переключение классов, а не редактирование стиля. , ,

Рекомендации и оптимизация JavaScript

Пример кода