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

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

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

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

Reuben 01.02.2011 06:57

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

Mark Schultheiss 22.03.2016 22:20

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

user1742529 02.01.2021 16:16
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
8 034
3
2 814 116
60
Перейти к ответу Данный вопрос помечен как решенный

Ответы 60

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>

The above method will consider div2 visible while :visible not. But the above might be useful in many cases, especially when you need to find if there is any error divs visible in the hidden parent because in such conditions :visible will not work.

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

chiborg 03.03.2010 13:10

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

evanmcd 13.01.2012 22:51

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

Casey 14.03.2014 21:56

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

Jimmy Knoot 14.04.2015 12:18

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

atheaos 25.04.2017 19:05

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

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

И селектор visible:

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

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

codecraig 11.07.2011 21:05

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

Etienne Dupuis 05.07.2012 00:12

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

vbullinger 20.02.2013 18:56

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

ZoomIn 09.08.2013 11:18

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

cwingrav 18.11.2015 18:57

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

Joshua Walsh 15.01.2016 07:15

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

chiborg 23.02.2016 17:59

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

Sebi 30.07.2016 12:13

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

Alejandro García Iglesias 02.08.2017 17:45

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

CPHPython 17.05.2018 17:00

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

Craig London 14.11.2018 19:13
Ответ принят как подходящий

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

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

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

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

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

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

kralco626 29.12.2010 21:30

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

Tsvetomir Tsonev 06.01.2011 15:30

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

sarsnake 11.01.2011 05:07

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

Tsvetomir Tsonev 14.01.2011 19:54

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

Kzqai 05.01.2012 19:36

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

Max Leske 22.06.2012 18:12

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

Yasen 10.09.2012 13:43

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

Robin Michael Poothurai 23.10.2012 12:43

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

Martin Thoma 03.01.2013 01:30

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

Chris Moschini 28.03.2013 03:02

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

Bill Ortell 17.04.2013 17:51

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

Robert Johnstone 30.08.2013 15:46

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

Turnerj 17.10.2013 05:53

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

Wolfpack'08 04.12.2013 05:58

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

Ameen 05.12.2013 08:57

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

Izkata 04.02.2014 02:43

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

carl 11.02.2014 10:46

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

BruceHill 24.06.2014 19:51

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

Yana Agun Siswanto 04.02.2015 11:03

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

Aniket Thakur 11.09.2015 17:05

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

Mark Schultheiss 25.04.2017 14:18

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

Black 20.05.2019 17:20

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

Broots Waymb 02.03.2020 18:20

Я сделал некоторую редакцию вашего ответа (написал пример), если он хороший, пожалуйста, примите его. Благодарность

Mehrzad Tejareh 11.10.2020 16:55

Часто, проверяя, видно что-то или нет, вы сразу же идете дальше и делаете с этим что-то еще. Цепочка 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" });

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

LocalPCGuy 22.04.2012 02:32

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

Ketan Savaliya 29.04.2018 16:28

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


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

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

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

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

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

jazzcat 08.05.2017 12:34

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

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

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

MarioDS 12.05.2013 02:37

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

awe 16.10.2013 13:12

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

vsync 22.04.2014 23:20

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

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

Селектор :visible согласно документация jQuery:

  • They have a CSS display value of none.
  • They are form elements with type="hidden".
  • Their width and height are explicitly set to 0.
  • An ancestor element is hidden, so the element is not shown on the page.

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout.

Это полезно в некоторых случаях и бесполезно в других, потому что, если вы хотите проверить, является ли элемент видимым (display != none), игнорируя видимость родителей, вы обнаружите, что выполнение .css("display") == 'none' не только быстрее, но и вернет проверку видимости правильно. .

Если вы хотите проверить видимость вместо отображения, вы должны использовать: .css("visibility") == "hidden".

Также примите во внимание дополнительные примечания jQuery:

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").

Кроме того, если вас беспокоит производительность, вам следует проверить Теперь вы видите меня ... показать / скрыть выступление (2010-05-04). И используйте другие методы для отображения и скрытия элементов.

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

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

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

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

nbrooks 26.09.2012 03:57

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

Evgeny Levin 02.12.2012 00:27

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

dont_trust_me 16.10.2018 12:43

Другой ответ, который вы должны принять во внимание: если вы скрываете элемент, вы должны использовать jQuery, но вместо того, чтобы скрывать его, вы удаляете весь элемент, но вы копируете его содержимое HTML и сам тег в переменную 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();
    });
    

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

urraka 29.06.2012 22:15

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

YangombiUmpakati 12.12.2017 14:08

Можно просто использовать атрибут 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. Не требует каркаса

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

alex 20.09.2012 08:45

Достаточно легко изменить приведенный выше код, чтобы имитировать (возможно, глупое) поведение 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.getCompu‌ tedStyle (o, null) .getPropertyValue ("display")! = "None") {return isRendered (o.parentNode);}} return false;}

Matt Brock 26.09.2012 17:57

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

alex 27.09.2012 01:33

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

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

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

nbrooks 26.09.2012 03:31

Демо Ссылка

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

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

Code Spy 25.01.2013 10:30

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

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

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

var $book = $('#book')

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

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

Ilia Rostovtsev 21.06.2013 01:32

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

Matthias Wegtun 21.06.2013 10:56

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

Kenneth Palaganas 25.08.2013 20:57

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

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


Лучшие практики и оптимизация JavaScript

Вот поистине поучительный видеоролик Google Tech Talk, сделанный фронтенд-инженером Google Николасом Закасом:

Пример:

$(document).ready(function() {
  if ($("#checkme:hidden").length) {
    console.log('Hidden');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="checkme" class="product" style="display:none">
  <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish
  <br>Product: Salmon Atlantic
  <br>Specie: Salmo salar
  <br>Form: Steaks
</div>

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

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

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

nbrooks 25.12.2013 12:53

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 Explorer filter:alpha):

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

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

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

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

Проверено на

Android 4.4 (собственный браузер / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Престо / 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*/

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

Kareem 01.09.2015 09:42

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

Gone Coding 01.09.2015 10:26

При тестировании элемента по селектору :hidden в jQuery следует учитывать, что элемент с абсолютным позиционированием может быть распознан как скрытый, хотя их дочерние элементы видны.

Во-первых, это кажется несколько нелогичным - хотя более внимательное рассмотрение документации jQuery дает соответствующую информацию:

Elements can be considered hidden for several reasons: [...] Their width and height are explicitly set to 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

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

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

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

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

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

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

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

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

Рабочая рабочий пример

Может ты сможешь сделать что-то вроде этого

$(document).ready(function() {
   var visible = $('#tElement').is(':visible');

   if(visible) {
      alert("visible");
                    // Code
   }
   else
   {
      alert("hidden");
   }
});
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<input type="text" id="tElement" style="display:block;">Firstname</input>

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

$(document).ready(function(){
  if(!$("#ablockercheck").is(":visible"))
    $("#ablockermsg").text("Please disable adblocker.").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ad-placement" id="ablockercheck"></div>
<div id="ablockermsg" style="display: none"></div>

ablockercheck - это идентификатор, который блокирует блокировщик рекламы. Поэтому, проверяя его, если он виден, вы можете определить, включен ли блокировщик рекламы.

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

Это какой-то вариант, чтобы проверить, виден ли тег или нет

 // using a pure CSS selector  
   if ($('p:visible')) {  
      alert('Paragraphs are visible (checked using a CSS selector) !');  
   };  
  
   // using jQuery's is() method  
   if ($('p').is(':visible')) {  
      alert('Paragraphs are visible (checked using is() method)!');  
   };  
  
   // using jQuery's filter() method  
   if ($('p').filter(':visible')) {  
      alert('Paragraphs are visible (checked using filter() method)!');  
   };  
  
   // you can use :hidden instead of :visible to reverse the logic and check if an element is hidden  
   // if ($('p:hidden')) {  
   //    do something  
   // };  

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

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

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

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

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

.show{ display: block; }

Вот как jQuery внутренне решает эту проблему:

jQuery.expr.pseudos.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Если вы не используете jQuery, вы можете просто использовать этот код и превратить его в свою собственную функцию:

function isVisible(elem) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

Какой 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;
    }
  }  
});

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

Ninjanoel 07.12.2016 19:36

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

Questionnaire 24.02.2020 10:58

Как и 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 или более, вы можете расширить этот объект и добавить к нему дополнительные свойства и проверить.

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

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

Документация по API: видимый селектор

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

Elements can be considered hidden for several reasons:

  • They have a CSS display value of none.
  • They are form elements with type="hidden".
  • Their width and height are explicitly set to 0.
  • An ancestor element is hidden, so the element is not shown on the page.

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout. During animations that hide an element, the element is considered to be visible until the end of the animation.

Source: :hidden Selector | jQuery API Documentation

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

Есть несколько способов проверить, виден или скрыт элемент в jQuery.

Демо HTML, например ссылка

<div id="content">Content</div>
<div id="content2" style="display:none">Content2</div>

Используйте селектор фильтра видимости $('element:hidden') или $('element:visible')

  • $('element:hidden'): выбирает все скрытые элементы.

    Example:
       $('#content2:hidden').show();
    
  • $('element:visible'): выбирает все видимые элементы.

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

Read more at 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
    }

Read more at http://api.jquery.com/is/

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

Using jQuery, make an element, "display:none", in CSS for hidden.

Дело в том:

$('element:visible')

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

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

Честно говоря, вопрос предшествует ответу это.

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

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

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

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

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

Также использование метода 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
}

Просто проверьте атрибут 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; }

Установите свой jQuery toggleClass(), addClass() или removeClass();.

Например,

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

Приведенный выше код добавит класс css show, если у элемента нет show, и удалит, если он имеет класс show.

И когда вы проверяете, виден он или нет, вы можете следовать этому коду jQuery,

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

Приведенный выше код вернет логическое значение (true), если элемент #myID имеет наш класс (show), и false, если у него нет класса (show).

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

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

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

Вместо того, чтобы писать 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');
  }
});

Если вы хотите проверить, отображается ли элемент на странице, в зависимости от видимости его родительского элемента, вы можете проверить, равны ли 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>

Цикл по всем дочерним элементам 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

Пытаться

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, чтобы найти совпадение, которое удовлетворяет переданному параметру. Он вернет истину, если есть совпадение, в противном случае вернет ложь.

<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 completed
                if($("p").is(":visible")){
                    alert("The paragraph  is visible.");
                } else{
                    alert("The paragraph  is hidden.");
                }
            });
        });

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

Он возвращает false, если элемент не виден.

function checkVisible(e) {
    if (!(e instanceof Element)) throw Error('not an Element');
    const elementStyle = getComputedStyle(e);
    if (elementStyle.display === 'none' || elementStyle.visibility !== 'visible' || elementStyle.opacity < 0.1) return false;
    if (e.offsetWidth + e.offsetHeight + e.getBoundingClientRect().height +
        e.getBoundingClientRect().width === 0) {
        return false;
    }
    const elemCenter   = {
        x: e.getBoundingClientRect().left + e.offsetWidth / 2,
        y: e.getBoundingClientRect().top + e.offsetHeight / 2
    };
    if (elemCenter.x < 0 || elemCenter.y < 0) return false;
    if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
    if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
    let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
    do {
        if (pointContainer === e) return true;
    } while (pointContainer = pointContainer.parentNode);
    return false;
}

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

   hideShow(){
  $("#accordionZiarat").hide();
  // Checks CSS content for display:[none|block], ignores visibility:[true|false]
  if ($("#accordionZiarat").is(":visible")) {
    $("#accordionZiarat").hide();
  }

  
  else if ($("#accordionZiarat").is(":hidden")) {
    $("#accordionZiarat").show();
  }

  else{

  }

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

$('element:hidden')

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

$('element:visible')

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

Другие вопросы по теме