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

avatar
Philip Morton
7 октября 2008 в 13:03
2878936
63
8147

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

Как проверить, является ли элемент visible или hidden?

Источник
Reuben
1 февраля 2011 в 03:57
57

Стоит упомянуть (даже по прошествии всего этого времени), что $(element).is(":visible") работает для jQuery 1.4.4, но не для jQuery 1.3.2, в Internet & nbsp; Explorer & nbsp; 8. Это можно проверить с помощью полезного тестового фрагмента Цветомира Цонева. Просто не забудьте изменить версию jQuery, чтобы протестировать каждую из них.

Mark Schultheiss
22 марта 2016 в 19:20
3

Это связанный, хотя и другой вопрос: coderhelper.com/questions/17425543/…

user1742529
2 января 2021 в 13:16
0

Если вас интересует не виртуальное скрытие элементов CSS, а физическая видимость в «области просмотра» для пользователя, то вам следует просмотреть coderhelper.com/questions/487073/… и coderhelper.com/questions/ 123999 /…

Ответы (63)

avatar
Tsvetomir Tsonev
7 октября 2008 в 13:30
9817

Поскольку вопрос относится к одному элементу, этот код может быть более подходящим:

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

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

Это то же самое, что и предложение твернта, но применяется к одному элементу; и он соответствует алгоритму, рекомендованному в jQuery FAQ.

Мы используем jQuery is () для проверки выбранного элемента с другим элементом, селектором или любым объектом jQuery. Этот метод просматривает элементы DOM, чтобы найти совпадение, удовлетворяющее переданному параметру. Он вернет истину, если есть совпадение, в противном случае вернет ложь.

kralco626
29 декабря 2010 в 18:30
171

Это решение, казалось бы, поощряет путаницу visible=false и display:none; в то время как решение Mote явно иллюстрирует намерение кодировщиков проверить display:none; (через упоминание скрыть и показать, какой элемент управления display:none, а не visible=true)

Tsvetomir Tsonev
6 января 2011 в 12:30
96

Это правильно, но :visible также проверит, видны ли родительские элементы, как указал чиборг.

sarsnake
11 января 2011 в 02:07
1

Цветомир, для IE7 это не работает - даже когда элементы скрыты, он думает, что visible = true. Пожалуйста, исправьте свой ответ, чтобы не вводить людей в заблуждение. visible и display - это разные свойства, и их следует рассматривать как таковые. Ответ Моте правильный.

Tsvetomir Tsonev
14 января 2011 в 16:54
47

Вы правы - я поясню, что код проверяет только свойство display. Учитывая, что исходный вопрос предназначен для show() и hide(), и они задают display, мой ответ правильный. Кстати, он работает с IE7, вот тестовый фрагмент - jsfiddle.net/MWZss;

Kzqai
5 января 2012 в 15:36
55

Я действительно обнаружил, что слова обратной логики лучше:! $ ('Selector'). Is (': hidden'); по какой-то причине. Стоит попробовать.

Max Leske
22 июня 2012 в 14:12
23

Вот простой тест производительности () для регулярного выражения: jsperf.com/jquery-is-vs-regexp-for-css-visibility. Заключение: если вы стремитесь к производительности, используйте регулярное выражение поверх is () (поскольку is () сначала ищет все скрытые узлы, прежде чем смотреть на фактический элемент).

Yasen
10 сентября 2012 в 09:43
3

Чалвак, вы можете почувствовать, что что-то правильно, но попытайтесь объяснить, почему. Двойное отрицание сбивает с толку, в отличие от простого оператора, поэтому $ ('selector'). Is (': shown'); намного понятнее, чем! $ ('selector'). is (': hidden');

Robin Michael Poothurai
23 октября 2012 в 08:43
2

@TsvetomirTsonev, чтобы проверить видимость родителя, вы можете использовать $ (element) .parent (). Is (": visible"); Я знаю, что это немного устарело, но будет полезно для нового поиска

Martin Thoma
2 января 2013 в 21:30
2

Что возвращает $(element).is(":visible"), если элемент виден не с точки зрения having display:none или visibility:hidden, а пользователь прокручивает страницу вниз, так что на самом деле он его не видит? Есть простой способ это проверить?

Chris Moschini
27 марта 2013 в 23:02
1

Для других пользователей, которым интересно, действительно ли это работает в IE7, это может сэкономить вам время - это работает, jquery 1.9.1: imgur.com/uKD4t8h

Bill Ortell
17 апреля 2013 в 13:51
1

@MaxLeske - Я почти уверен, что ДАННЫЙ! (в большинстве случаев), что когда вы вытаскиваете нож для регулярного выражения, вы получаете перфоманс. ударить. Дополнительные проверки будут нулевыми по сравнению с накладными расходами / обработкой регулярного выражения.

Robert Johnstone
30 августа 2013 в 11:46
1

Как сделать наоборот?

Turnerj
17 октября 2013 в 01:53
2

Я нашел этот информативный при поиске по :visible и :hidden. По сути, он смотрит на offsetHeight и offsetWidth, что позволяет ему обеспечить наилучшее покрытие (например, у вас может быть класс, который имеет display:none; в качестве свойства, и он правильно сообщит, отображается ли он)

Wolfpack'08
4 декабря 2013 в 01:58
1

Итак, должны ли мы использовать .is(":invisible") для false? Или !$(element).is(":visible"), или что?

Ameen
5 декабря 2013 в 04:57
1

@ Wolfpack'08: Я тоже ищу похожее решение. До сих пор я использовал $(element).css('display')=='none' для обнаружения скрытых элементов.

Izkata
3 февраля 2014 в 22:43
1

@Kzqai Кроме того, я считаю, что это работает: $(selector).is('not(:hidden)')

carl
11 февраля 2014 в 06:46
1

Это не работает в последней версии jquery. Он устарел. Какая лучшая работа? (Почему они удалили это ...?)

BruceHill
24 июня 2014 в 15:51
1

@carl Я ничего не вижу в документации jQuery о том, что это устарело. Я также протестировал его с помощью последней версии jQuery, и он все еще работает. Здесь: jsfiddle.net/F6atJ

Yana Agun Siswanto
4 февраля 2015 в 08:03
2

Не работает для элемента, у которого есть родительский overflow: hidden;

Aniket Thakur
11 сентября 2015 в 14:05
2

Не работает на Chrome, но работает безупречно в firefox :( Пришлось сделать что-то вроде jQuery(textarea).parent().css('display') != 'none' вместо jQuery(textarea).parent().is(":visible")

Mark Schultheiss
25 апреля 2017 в 11:18
1

Изменения в версиях 1.12+, 2.2.0+ и 3.0+ изменяют количество, если выбрано несколько элементов (см. Примечание внизу этого coderhelper.com/a/17426800/125981)

Black
20 мая 2019 в 14:20
1

Не работает с jQuery UI Selectmenu, в нем говорится, что моя опция скрыта, хотя она видна.

Broots Waymb
2 марта 2020 в 15:20
0

Возможно, это поможет кому-нибудь: если вы используете анимацию, такую ​​как toggle("slow"), вам нужно использовать опцию обратного вызова и проверить видимость там.

avatar
Enripro
5 января 2022 в 15:43
0

Самый простой ответ на этот вопрос:

function checkUIElementVisible(element) {
    return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
avatar
udorb b
24 декабря 2021 в 08:00
-2

если скрывать с классом - d-none

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

    }


  
avatar
Vicky P
21 декабря 2021 в 09:46
0

Есть два способа проверить видимость элемента.

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

или

if($('.selector:visible')){
    // element is visible
}else{
    // element is visible
}
avatar
centralhubb.com
22 января 2021 в 11:32
0
if($(element).is(":visible")) {
  console.log('element is visible');
} else {
  console.log('element is not visible');
}
avatar
Hasee Amarathunga
23 сентября 2020 в 05:05
5

Используя скрытый выбор, вы можете сопоставить все скрытые элементы

$('element:hidden')

Используя Visible selection, вы можете сопоставить все видимые элементы

$('element:visible')
avatar
Mojtaba Nava
2 сентября 2020 в 07:36
0

Вы также можете:

   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{

  }
avatar
Brane
15 февраля 2020 в 19:54
5

Расширенная функция проверки видимости элемента, отсутствия отображения или даже уровня непрозрачности

Возвращает 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;
}
avatar
Ankush Kumar
10 декабря 2019 в 07:05
1

Приведенный ниже код проверяет, является ли элемент скрытым в jQuery или видимым

// You can also do this...

        $("button").click(function(){
            // show hide paragraph on button click
            $("p").toggle("slow", function(){
                // check paragraph once toggle effect is completed
                if($("p").is(":visible")){
                    alert("The paragraph  is visible.");
                } else{
                    alert("The paragraph  is hidden.");
                }
            });
        });
avatar
Aravinda Meewalaarachchi
18 июля 2019 в 10:37
3

Вы можете использовать функцию jQuery is(), чтобы проверить выбранный элемент видимым или скрытым. Этот метод просматривает элементы DOM, чтобы найти совпадение, удовлетворяющее переданному параметру. Он вернет истину, если есть совпадение, в противном случае вернет ложь.

<script>
    ($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>
avatar
Kamil Kiełczewski
12 июня 2019 в 06:46
1

Попробуйте

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>
avatar
L Y E S - C H I O U K H
10 октября 2018 в 15:01
11

1 • Решение jQuery

Методы определения видимости элемента в jQuery

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

Цикл для всех видимых дочерних элементов div элемента с id 'myelement':

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

avatar
Muhammad
12 сентября 2018 в 09:34
5

Решение 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>
avatar
Profesor08
15 августа 2018 в 01:48
5

Если вы хотите проверить, отображается ли элемент на странице, в зависимости от видимости его родительского элемента, вы можете проверить, равны ли элементы width и height элемента на 0.

jQuery

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

Ваниль

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

Или

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

avatar
user10145552
29 июля 2018 в 21:07
1

Вместо того, чтобы писать 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');
  }
});
avatar
user8903269
22 декабря 2017 в 20:12
1

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

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

if(isHidden($("element")) == true){
    // Something
}
avatar
Disapamok
26 сентября 2017 в 09:11
3

Вы можете использовать класс 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).

avatar
Antoine Auffray
8 августа 2017 в 17:47
8

Просто проверьте атрибут display (или visibility в зависимости от того, какой вид невидимости вы предпочитаете). Пример:

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
avatar
Alireza
6 мая 2017 в 06:38
18

Просто проверьте, является ли этот элемент видимым , и он вернет логическое значение . 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
};

Также использование метода 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
}
avatar
user6119825
29 апреля 2017 в 10:25
0
$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
avatar
Peter Wone
25 марта 2017 в 08:49
4

Чтобы быть справедливым, вопрос предшествовал этому ответу.

Я добавляю это не для того, чтобы критиковать ОП, а чтобы помочь тем, кто все еще задает этот вопрос.

Правильный способ определить, является ли что-то видимым, - это проконсультироваться с вашей моделью представления;

Если вы не знаете, что это значит, вы собираетесь отправиться в путешествие открытий, которое значительно упростит вашу работу.

Вот обзор архитектуры модель-представление-представление-модель (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; он обращается к модели представления.

avatar
Abdul Aziz Al Basyir
20 марта 2017 в 05:07
9

Слишком много методов проверки скрытых элементов. Это лучший выбор (я только что порекомендовал вам):

Используя jQuery, создайте элемент "display: none" в CSS для скрытого.

Дело:

$('element:visible')

И пример использования:

$('element:visible').show();
avatar
Arun Karnawat
13 декабря 2016 в 09:33
18

Есть несколько способов проверить, виден ли элемент или скрыт в 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/

avatar
Sky Yip
6 декабря 2016 в 08:44
14

Я просто хочу уточнить, что в jQuery

Элементы можно считать скрытыми по нескольким причинам:

  • У них нет отображаемого значения CSS.
  • Это элементы формы с type = "hidden".
  • Их ширина и высота явно равны 0.
  • Элемент-предок скрыт, поэтому элемент не отображается на странице.

Элементы с видимостью: скрытый или непрозрачность: 0 считаются видимыми, поскольку они по-прежнему занимают место в макете. Во время анимации, скрывающей элемент, элемент считается видимым до конца анимации.

Источник: : скрытый Селектор | Документация jQuery API

if($('.element').is(':hidden')) {
  // Do something
}
avatar
Wolfack
1 декабря 2016 в 06:46
7

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

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

Документация API: visible Selector

avatar
No one
5 ноября 2016 в 12:26
19

Как hide(), show() и toggle() присоединяет встроенный CSS (display: none или display: block) к элементу. Точно так же мы можем легко использовать тернарный оператор, чтобы проверить, является ли элемент скрытым или видимым, проверив 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 или более, вы можете расширить этот объект, добавить к нему дополнительные свойства и проверить.

avatar
lmcDevloper
1 июня 2016 в 06:36
21

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

Обратите внимание: если селектор возвращает пустой набор элементов, этот метод вернет true, поэтому сначала проверьте длину, если вы ищете невидимые элементы: var items = jQuery('.selector'); if (items.length == 0 || !items.isVisible()) { alert('item is not visible'); }

Questionnaire
24 февраля 2020 в 07:58
0

А как насчет элементов, которые скрыты под другими элементами?

avatar
Abrar Jahin
2 мая 2016 в 12:31
17

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

$(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>
avatar
Oriol
12 апреля 2016 в 01:11
16

Вот как 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, пока элемент виден.

avatar
Disapamok
4 апреля 2016 в 08:21
12

Вы можете просто добавить класс, когда он виден. Добавьте класс show. Затем проверьте, есть ли у него класс:

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

Возвращает истину, если у вас есть класс show.

Добавьте CSS следующим образом:

.show{ display: block; }
avatar
cbertelegni
23 марта 2016 в 13:21
3
if($("h1").is(":hidden")){
    // your code..
}
avatar
Sangeet Shah
24 августа 2015 в 12:10
12

Это опция, позволяющая проверить, отображается ли тег

 // 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  
   // };  
avatar
Prabhagaran
18 августа 2015 в 09:04
22
if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}
avatar
Roman Losev
27 апреля 2015 в 07:57
62

Пример использования видимой проверки для активированного блокировщика рекламы:

$(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" - это идентификатор, который блокирует блокировщик рекламы. Поэтому, проверив его, если он виден, вы сможете определить, включен ли блокировщик рекламы.

avatar
Mathias Stavrou
7 апреля 2015 в 12:26
45

Может быть, у вас получится сделать что-то вроде этого

$(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>
avatar
V31
29 августа 2014 в 20:20
35

Функция может быть создана для проверки атрибутов видимости / отображения, чтобы оценить, отображается ли элемент в пользовательском интерфейсе или нет.

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

Рабочий скрипт

avatar
RN Kushwaha
23 августа 2014 в 20:53
37

Но что, если CSS элемента выглядит следующим образом?

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

Итак, этот ответ на вопрос о переполнении стека Как проверить, находится ли элемент за пределами экрана , также следует учитывать.

avatar
pixellabme
11 августа 2014 в 05:28
41

Просто проверьте видимость, проверив логическое значение, например:

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

Я использовал этот код для каждой функции. В противном случае вы можете использовать is(':visible') для проверки видимости элемента.

avatar
conceptdeluxe
6 мая 2014 в 10:50
108

При тестировании элемента по сравнению с селектором :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/

Тот же код JavaScript затем будет иметь следующий результат:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
avatar
Kareem
12 апреля 2014 в 07:38
31
.is(":not(':hidden')") /*if shown*/
Kareem
1 сентября 2015 в 06:42
1

Потому что: not (': hidden') не то же самое, что is (': visible'). «Visible» работает с css «opacity», а не с JQuery «show () / hide ()». Кроме того, нет дополнительной цитаты. Каждый набор играет роль в этом небольшом коде.

Gone Coding
1 сентября 2015 в 07:26
1

1) и :visible, и :hidden проверяют видимость элемента CSS и предка, а не только display: none, как вы сейчас предлагаете. 2) кавычки внутри псевдоселектора не требуются , а требуются, если селектор содержит только : и буквенно-цифровые символы (например, :not(:hidden) быстрее 14380, что и <106625> то же самое, что и <106625> ) и 3) как вы станете лучше, если вы не можете согласиться с тем, что иногда на самом деле можете ошибаться? :)

avatar
Aleko
9 апреля 2014 в 17:06
62

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

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

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

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

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

г) Проверить, имеет ли элемент нулевую ширину / высоту / непрозрачность или 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
avatar
Andron
19 марта 2014 в 12:42
39

Поскольку Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (как описано для jQuery: visible Selector) - мы можем проверить, является ли элемент действительно видимым> таким образом: <9143276611478>

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

avatar
Premshankar Tiwari
31 января 2014 в 06:24
54

Вам нужно проверить как ... Отображение, так и видимость:

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

Если мы проверим $(this).is(":visible"), jQuery автоматически проверит обе вещи.

avatar
Gaurav
15 ноября 2013 в 10:41
33
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
avatar
cssimsek
5 ноября 2013 в 23:32
34

Также вот троичное условное выражение для проверки состояния элемента и его последующего переключения:

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
nbrooks
25 декабря 2013 в 08:53
4

Или, знаете ли, просто избавьтесь от условного выражения и скажите $('elementToToggle').toggle('slow'); ... :)

avatar
Irfan DANISH
28 октября 2013 в 06:43
78

Пример:

$(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>
avatar
Lopsided
18 июля 2013 в 21:17
64

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

Использование классов, предназначенных для «скрытия» элементов, - это просто, а также один из самых эффективных методов. Переключение класса «скрытый» со стилем Display на «none» будет работать быстрее, чем редактирование этого стиля напрямую. Я довольно подробно объяснил некоторые из этих вопросов в вопросе о переполнении стека Как сделать два элемента видимыми / скрытыми в одном div .


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

Вот поистине информативное видео о Google Tech Talk, подготовленное инженером Google Николаса Закаса:

avatar
Matthias Wegtun
4 июня 2013 в 13:42
70

Чтобы проверить, не отображается ли он, я использую !:

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

Или следующий пример - сохранение селектора jQuery в переменной, чтобы повысить производительность, когда он вам понадобится несколько раз:

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
Ilia
20 июня 2013 в 21:32
2

Как вы определили, что сохранение селектора в переменной действительно быстрее?

Matthias Wegtun
21 июня 2013 в 06:56
4

Привет @Ilia Rostovtsev jsperf.com/caching-jquery-selectors Здесь можно запустить тест. В любом случае приятно иметь его в кэше, чтобы к нему можно было получить доступ быстрее

Kenneth Palaganas
25 августа 2013 в 16:57
3

Это подходит, если вы хотите использовать одну переменную в процессе вместо вызова и вызова одного и того же объекта.

avatar
Code Spy
25 января 2013 в 05:34
147

Демо ссылка

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

Code Spy
25 января 2013 в 06:30
2

@Adrew, но эта ссылка показывает рабочий пример этой функции. Думаю, практический ответ может занять целую страницу текста :)

avatar
Maneesh Kumar
20 июля 2012 в 12:44
94

Это может сработать:

expect($("#message_div").css("display")).toBe("none");
nbrooks
25 сентября 2012 в 23:31
8

Что это за язык / диалект / библиотека? Я не знаком с этим синтаксисом в JS ...

avatar
Matt Brock
16 июля 2012 в 19:18
173

Вы также можете сделать это с помощью обычного 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. Не требует фреймворка

alex
20 сентября 2012 в 04:45
7

Работает немного иначе, чем jQuery; он считает visibility: hidden видимым .

Matt Brock
26 сентября 2012 в 13:57
5

Достаточно легко изменить приведенный выше код, чтобы имитировать (возможно, глупое) поведение jQuery. . . . . function isRendered (o) {if ((o.nodeType! = 1) || (o == document.body)) {return true;} if (o.currentStyle && o.currentStyle ["display"]! = "none") {return isRendered (o.parentNode);} else if (window.getComputedStyle) {if (document.defaultView.getComputedStyle (o, null) .getPropertyValue ("display")! = "none") {return isRendered (o.parentNode );}} return false;}

alex
26 сентября 2012 в 21:33
4

Конечно, я просто добавлял это для пользы пользователей, которые использовали это без сканирования кода. :)

avatar
Vaishu
13 июня 2012 в 13:20
139

ebdiv должен быть установлен на style="display:none;". Работает как для отображения, так и для скрытия:

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
avatar
ScoRpion
23 мая 2012 в 12:59
141

Можно просто использовать атрибут hidden или visible, например:

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

Или вы можете упростить то же самое с помощью is следующим образом.

$(element).is(":visible")
avatar
webvitaly
24 апреля 2012 в 21:04
225

Как работает видимость элементов и 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();
    });
    
urraka
29 июня 2012 в 18:15
21

Еще одно различие между visibility:hidden и opacity:0 заключается в том, что элемент по-прежнему будет реагировать на события (например, щелчки) с помощью opacity:0. Я научился этому трюку, создавая настраиваемую кнопку для загрузки файлов.

YangombiUmpakati
12 декабря 2017 в 11:08
2

также, если вы скрываете ввод с непрозрачностью: 0, он все равно выбирается с помощью клавиши табуляции

avatar
Lucas
21 апреля 2012 в 23:40
126

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

avatar
Evgeny Levin
3 февраля 2012 в 16:04
170

Я бы использовал класс CSS .hide { display: none!important; }.

Чтобы скрыть / показать, я звоню .addClass("hide")/.removeClass("hide"). Для проверки видимости я использую .hasClass("hide").

Это простой и понятный способ проверять / скрывать / отображать элементы, если вы не планируете использовать методы .toggle() или .animate().

nbrooks
25 сентября 2012 в 23:57
13

.hasClass('hide') не проверяет, скрыт ли предок родителя (что также сделало бы его скрытым). Вы могли бы заставить это работать правильно, проверив, .closest('.hide').length > 0, но зачем изобретать велосипед?

Evgeny Levin
1 декабря 2012 в 20:27
2

Предлагаемый вами вариант возвращается, если элемент отображается в html, мой вариант возвращается, если элемент был напрямую скрыт вашим механизмом кода / просмотра javascript. Если вы знаете, что родительские элементы никогда не должны быть скрыты - используйте .hasClass (), чтобы быть более строгим и предотвратить будущие ошибки. Если вы хотите проверить не только видимость, но и установленное состояние элемента - также используйте .hasClass (). В других случаях .closest () лучше.

dont_trust_me
16 октября 2018 в 09:43
2

Почему бы вам просто не использовать .is (": visible")?

avatar
Pedro Rainho
25 ноября 2011 в 09:16
255

Селектор :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). И используйте другие методы для отображения и скрытия элементов.

avatar
Abiy
6 июля 2011 в 20:19
224

Это работает для меня, и я использую show() и hide(), чтобы сделать мой div скрытым / видимым:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
avatar
aaronLile
24 марта 2011 в 18:44
561

Ни один из этих ответов не касается того, что, как я понимаю, является вопросом, который я искал, «Как мне обрабатывать элементы, у которых есть visibility: hidden. Ни :visible, ни :hidden не справятся с этим, поскольку они оба ищут отображение в соответствии с документацией. Насколько я мог определить, нет селектора для обработки видимости CSS. Вот как я решил это (стандартные селекторы jQuery, может быть более сжатый синтаксис):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
MarioDS
11 мая 2013 в 22:37
22

Этот ответ хорошо подходит для буквально visibility, но вопрос был How you would test if an element has been hidden or shown using jQuery?. Использование jQuery означает: свойство display.

awe
16 октября 2013 в 09:12
13

Элементы с visibility: hidden или opacity: 0 считаются видимыми, поскольку они по-прежнему занимают место в макете. См. Ответ Педро Рейнхо и документации jQuery по селектору :visible.

vsync
22 апреля 2014 в 19:20
10

вам нужно пройти вверх по DOM, чтобы проверить родителей узла, иначе это бесполезно.

avatar
user574889
13 января 2011 в 21:13
412

Из Как определить состояние переключенного элемента?


Вы можете определить, свернут ли элемент или нет, используя селекторы :visible и :hidden.

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

Если вы просто воздействуете на элемент на основе его видимости, вы можете просто включить :visible или :hidden в выражение селектора. Например:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
jazzcat
8 мая 2017 в 09:34
6

интересно, почему ни в одном ответе не упоминается случай, когда элемент перемещается из видимого окна, например top:-1000px ... Думаю, это крайний случай

avatar
Simon_Weaver
25 июля 2009 в 10:21
311

Часто, проверяя, видно ли что-то или нет, вы немедленно идете вперед и делаете с этим что-то еще. Цепочка 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" });
LocalPCGuy
21 апреля 2012 в 22:32
25

Нет причин извлекать узел DOM из фрагмента, использованного в примере, а затем снова искать его. Лучше просто сделать: var $ button = $ ('# btnUpdate'); А затем в выражениях If просто используйте $ button вместо $ (button). Имеет преимущество кеширования объекта jQuery.

Ketan Savaliya
29 апреля 2018 в 13:28
2

вот простой пример jquerypot.com/…

avatar
twernt
7 октября 2008 в 13:16
1546

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

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

И селектор visible:

// Matches all elements that are visible
$('element:visible')
codecraig
11 июля 2011 в 17:05
69

будьте осторожны, в этой презентации есть несколько полезных советов, связанных с производительностью: addyosmani.com/jqprovenperformance

Etienne Dupuis
4 июля 2012 в 20:12
28

На страницах с 21 по 28 показано, насколько медленный: hidden или: visible по сравнению с другими селекторами. Спасибо, что указали на это.

vbullinger
20 февраля 2013 в 14:56
114

Когда вы имеете дело с парой элементов, а происходит очень мало - то есть АБСОЛЮТНО БОЛЬШОЕ БОЛЬШИНСТВО СЛУЧАЕВ - проблема времени до смехотворно незначительна. О нет! Прошло 42 мс вместо 19 мс !!!

ZoomIn
9 августа 2013 в 07:18
18

Я переключаю элемент вручную, используя этот селектор. $ ('element: hidden') для меня всегда верно!

cwingrav
18 ноября 2015 в 15:57
2

: hidden предназначен для элементов формы, а не для отображения: none. Это не тот ответ, которого люди, скорее всего, ожидают.

Joshua Walsh
15 января 2016 в 04:15
16

@cwingrav Возможно, вы захотите перечитать документацию,: hidden применяется ко всем элементам. Элементы формы с type="hidden" - это только один случай, который может сработать: скрытый. Элементы без высоты и ширины, элементы с display: none и элементы со скрытыми предками также будут квалифицироваться как: скрытые.

chiborg
23 февраля 2016 в 14:59
4

Встроенное представление на связанной странице больше не работает, перейдите на slideshare.net/AddyOsmani/jquery-proven-performance-tips-tricks.

Sebi
30 июля 2016 в 09:13
6

@vbullinger 42 мс на самом деле немного дольше, чем я бы хотел дождаться, пока веб-сайт отреагирует на мои действия - это означает, что около 3 кадров анимации отбрасываются / задерживаются только со скоростью 60 кадров в секунду.

Alejandro García Iglesias
2 августа 2017 в 14:45
4

@vbullinger - любая обработка, которая занимает более 16 мс, начинает снижать FPS. Так что да, если это занимает 42 мс, это может быть плохой сделкой, если вы заинтересованы в производительности.

CPHPython
17 мая 2018 в 14:00
3

Из jQuery docs: "использование :hidden может сильно повлиять на производительность, так как может заставить браузер повторно отображать страницу, прежде чем он сможет определить видимость . Отслеживание видимости элементов с помощью других методов, например с использованием класса, может обеспечить лучшую производительность ".

Craig London
14 ноября 2018 в 16:13
3

Ссылка выше на веб-сайт AddyOsmani действительна, но Slideshare больше не позволяет встраивать flash. Вы можете просмотреть слайды здесь slideshare.net/AddyOsmani/…

avatar
Mote
7 октября 2008 в 13:09
1018
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 не будет работать.

chiborg
3 марта 2010 в 10:10
134

Это проверяет только свойство отображения одного элемента. Атрибут: visible проверяет также видимость родительских элементов.

evanmcd
13 января 2012 в 18:51
17

Это единственное решение, которое у меня сработало при тестировании с IE 8.

Casey
14 марта 2014 в 17:56
21

@chiborg Да, но иногда это то, что вам нужно, и мне пришлось на собственном горьком опыте узнать, насколько «умным» был jQuery ...

Jimmy Knoot
14 апреля 2015 в 09:18
9

Это действительно отвечает на вопрос, поскольку вопрос касается одного элемента и с использованием функций hide(), show() и toggle(), однако, как уже было сказано большинством, мы должны использовать :visible и :hidden псевдоклассы.

atheaos
25 апреля 2017 в 16:05
2

Этот ответ можно использовать, когда элемент существует, но в данный момент отсутствует на странице, например, после detach ().