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

7315

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

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

  • 35
    Стоит отметить (даже после всего этого времени), что $(element).is(":visible") работает для jQuery 1.4.4, но не для jQuery 1.3.2, в Internet & nbsp; Explorer & nbsp; 8 . Это можно проверить с помощью полезного фрагмента теста Цветомира Цонева . Просто не забудьте изменить версию jQuery, чтобы протестировать под каждой.
  • 0
    Это связано, хотя другой вопрос: stackoverflow.com/questions/17425543/…
Показать ещё 1 комментарий
Теги:
dom
visibility

56 ответов

9023
Лучший ответ

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

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

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

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

  • 141
    Казалось бы, это решение поощряет конфликты visible=false и display:none ; в то время как решение Моте явно не учитывает намерение кодировщиков проверить display:none ; (через упоминание скрытия и показа, какой элемент управления display:none не visible=true )
  • 81
    Это правильно, но :visible также проверит, :visible ли родительские элементы, как указал chiborg.
Показать ещё 19 комментариев
1318

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

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

И visible селектор:

// Matches all elements that are visible
$('element:visible')
  • 57
    только будьте осторожны, в этой презентации есть несколько хороших советов, касающихся производительности: addyosmani.com/jqprovenperformance
  • 20
    На страницах с 21 по 28 показано, как медленно: скрытый или: видимый сравнивается с другими селекторами. Спасибо за указание на это.
Показать ещё 10 комментариев
872
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

Выше метод не учитывает видимость родителя. Чтобы рассмотреть и родителя, вы должны использовать .is(":hidden") или .is(":visible").

Например,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

Приведенный выше метод будет считать div2 видимым, а :visible нет. Но вышеупомянутое может быть полезно во многих случаях, особенно когда вам нужно выяснить, есть ли какие-либо ошибки div, видимые в скрытом родительском элементе, потому что в таких условиях :visible не будет работать.

  • 123
    Это проверяет только для свойства отображения одного элемента. Атрибут: visible проверяет также видимость родительских элементов.
  • 12
    Это единственное решение, которое работало для меня при тестировании с IE 8.
Показать ещё 4 комментария
451

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

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
  • 15
    Этот ответ хорош для буквальной обработки visibility , но вопрос был в том, How you would test if an element has been hidden or shown using jQuery? , Использование jQuery означает: свойство display .
  • 8
    Элементы с visibility: hidden или opacity: 0 считаются видимыми, поскольку они по-прежнему занимают место в макете. Смотрите ответ Педро Райнхо и документацию jQuery о :visible селекторе.
Показать ещё 2 комментария
360

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


Вы можете определить, скомплектован ли элемент или нет, с помощью селекторов :visible и :hidden.

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

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

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
  • 2
    интересно, почему ни один ответ не упоминает случай, когда элемент удален от видимого окна, например top:-1000px ... думаю, это top:-1000px случай
253

Часто, проверяя, что-то видимо или нет, вы немедленно пойдете прямо вперед и сделаете что-то еще с ним. Цепочка 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" });
  • 21
    Нет причин извлекать узел DOM из фрагмента, использованного в примере, а затем снова искать его. Лучше просто сделать: var $ button = $ ('# btnUpdate'); А затем в выражениях If просто используйте кнопку $ вместо $ (кнопка). Имеет преимущество кэширования объекта jQuery.
  • 0
    Вот простой пример jquerypot.com/…
206

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

190

Как видимость элементов и 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();
    });
    
  • 19
    Еще одно различие между visibility:hidden и opacity:0 состоит в том, что элемент по-прежнему будет реагировать на события (например, щелчки) с opacity:0 . Я узнал этот трюк, создав пользовательскую кнопку для загрузки файлов.
  • 0
    также, если вы скрываете ввод с непрозрачностью: 0, он по-прежнему выбирается с помощью клавиши табуляции
178

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

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

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

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

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

  • 10
    .hasClass('hide') не проверяет, является ли предок родителя скрытым (что также сделает его скрытым). Вы могли бы заставить это работать правильно, проверив, если .closest('.hide').length > 0 , но зачем изобретать велосипед?
  • 0
    Вариант, который вы предлагаете, возвращает, если элемент виден в html, мой вариант возвращает, если элемент был непосредственно скрыт вашим движком кода JavaScript / представления. Если вы знаете, что родительские элементы никогда не должны быть скрыты - используйте .hasClass (), чтобы быть более строгим и предотвратить будущие ошибки. Если вы хотите проверить не только видимость, но и состояние элемента, также установите .hasClass () тоже. В других случаях лучше .closest ().
Показать ещё 1 комментарий
133

Вы также можете сделать это, используя обычный JavaScript:

function isRendered(domObj) {
    if ((domObj.nodeType != 1) || (domObj == document.body)) {
        return true;
    }
    if (domObj.currentStyle && domObj.currentStyle["display"] != "none" && domObj.currentStyle["visibility"] != "hidden") {
        return isRendered(domObj.parentNode);
    } else if (window.getComputedStyle) {
        var cs = document.defaultView.getComputedStyle(domObj, null);
        if (cs.getPropertyValue("display") != "none" && cs.getPropertyValue("visibility") != "hidden") {
            return isRendered(domObj.parentNode);
        }
    }
    return false;
}

Примечания:

  • Работает везде

  • Работает для вложенных элементов

  • Работает для CSS и встроенных стилей

  • Не требуется фреймворк

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

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

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

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

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

Демо-ссылка

$('#clickme').click(function() {
  $('#book').toggle('slow', function() {
    // Animation complete.
    alert($('#book').is(":visible")); //<--- TRUE if Visible False if Hidden
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">
  Click here
</div>
<img id="book" src="http://www.chromefusion.com/wp-content/uploads/2012/06/chrome-logo.jpg" alt="" />

Источник:

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

  • 0
    @ Adrew, но по этой ссылке показан рабочий пример этой функции. Я думаю, что практический ответ может весить по всей странице текста :)
  • 0
    @ jolly.exe, пока этот рабочий пример не исчезнет.
110

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

103

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

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

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

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

Элементы можно считать скрытыми по нескольким причинам: [...] Их ширина и высота явно установлены на 0. [...]

Таким образом, это действительно имеет смысл в отношении box-model и вычисленного стиля для элемента. Даже если ширина и высота не заданы явно 0, они могут быть установлены неявно.

Посмотрите на следующий пример:

console.log($('.foo').is(':hidden')); // true
console.log($('.bar').is(':hidden')); // false
.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

ОБНОВЛЕНИЕ ДЛЯ JQUERY 3.x:

С jQuery 3 описанное поведение изменится! Элементы будут считаться видимыми, если у них есть какие-либо макеты, в том числе с нулевой шириной и/или высотой.

JSFiddle с jQuery 3.0.0-alpha1:

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

Тот же JS будет иметь этот вывод:

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

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

expect($("#message_div").css("display")).toBe("none");
  • 6
    Какой это язык / диалект / библиотека? Я не знаком с этим синтаксисом в JS ...
  • 0
    Похоже на жасмин юнит тест.
65

Пример:

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

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

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


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

Вот поистине поучительное видео в Google Tech Talk от главного инженера Google Николаса Закаса:

58

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

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

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

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
  • 0
    Как вы определили, что сохранение селектора в переменной действительно быстрее?
  • 3
    Привет @Илья Ростовцев jsperf.com/caching-jquery-selectors Там вы можете запустить тест. В любом случае это хорошо, что он кэшируется, чтобы к нему можно было получить доступ быстрее
Показать ещё 1 комментарий
53

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

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

53

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

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

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

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

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

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

Протестировано

Android 4.4 (собственный браузер /Chrome/Firefox ), Firefox (Windows/Mac), Chrome (Windows/Mac), Opera (Windows Presto/Mac Webkit), Internet Explorer (режимы Internet Explorer 5-11 + Internet Explorer 8 на виртуальной машине), Safari (Windows/Mac/iOS)

var is_visible = (function () {
    var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0,
        y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0,
        relative = !!((!x && !y) || !document.elementFromPoint(x, y));
        function inside(child, parent) {
            while(child){
                if (child === parent) return true;
                child = child.parentNode;
            }
        return false;
    };
    return function (elem) {
        if (
            document.hidden ||
            elem.offsetWidth==0 ||
            elem.offsetHeight==0 ||
            elem.style.visibility=='hidden' ||
            elem.style.display=='none' ||
            elem.style.opacity===0
        ) return false;
        var rect = elem.getBoundingClientRect();
        if (relative) {
            if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false;
        } else if (
            !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) ||
            (
                rect.top + elem.offsetHeight/2 < 0 ||
                rect.left + elem.offsetWidth/2 < 0 ||
                rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) ||
                rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth)
            )
        ) return false;
        if (window.getComputedStyle || elem.currentStyle) {
            var el = elem,
                comp = null;
            while (el) {
                if (el === document) {break;} else if(!el.parentNode) return false;
                comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle;
                if (comp && (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined' && comp.opacity != 1))) return false;
                el = el.parentNode;
            }
        }
        return true;
    }
})();

Как использовать:

is_visible(elem) // boolean
50

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

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

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

37

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

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

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

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

Потому что 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;
    }
});
31

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

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

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

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

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

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

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

29

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

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

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

28

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

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
  • 4
    Или, ну, просто избавьтесь от всего условного и скажите $('elementToToggle').toggle('slow'); ... :)
23
.is(":not(':hidden')") /*if shown*/
  • 0
    Потому что: not (': hidden') - это не то же самое, что и (': visible'). «Видимый» работает с css «непрозрачность», а не с JQuery «show () / hide ()». Плюс, нет дополнительной цитаты. Каждый набор играет роль в этом маленьком коде.
  • 0
    1) и :visible и :hidden проверить элемент CSS и видимость предка, а не только display: none как вы сейчас предлагаете. 2) кавычки внутри псевдоселектора не требуются, если селектор содержит только : и буквенно-цифровые символы (например, :not(:hidden) совпадает с not(':hidden') (только немного быстрее) и 3) как вы будете стать лучше, если вы не можете признать, что иногда вы на самом деле ошибаетесь? :)
19

Я искал это, и ни один из ответов не подходит для моего случая, поэтому я создал функцию, которая вернет false, если один глаз не сможет увидеть элемент

jQuery.fn.extend({
  isvisible: function() {
    //
    //  This function call this: $("div").isvisible()
    //  Return true if the element is visible
    //  Return false if the element is not visible for our eyes
    //
    if ( $(this).css('display') == 'none' ){
        console.log("this = " + "display:none");
        return false;
    }
    else if( $(this).css('visibility') == 'hidden' ){
        console.log("this = " + "visibility:hidden");   
        return false;
    }
    else if( $(this).css('opacity') == '0' ){
        console.log("this = " + "opacity:0");
        return false;
    }   
    else{
        console.log("this = " + "Is Visible");
        return true;
    }
  }  
});
  • 0
    Просто обратите внимание: если селектор возвращает пустой набор элементов, этот метод вернет true, поэтому сначала проверьте длину, если вы ищете невидимые элементы: var items = jQuery('.selector'); if (items.length == 0 || !items.isVisible()) { alert('item is not visible'); }
17
if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}
15

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

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

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

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

Какой isVisible вернет true, пока элемент будет виден.

14

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

13

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

Как и hide(), show() и toggle() присоединяет встроенный CSS (display: none или display: block) к элементу. Точно так же мы можем легко использовать троичный оператор, чтобы проверить, скрыт или видим элемент погоды, проверяя отображение css.

ОБНОВИТЬ:

  • Вам также необходимо проверить, установлен ли для элемента css видимость: "видимый" или видимость: "скрытый"
  • Элемент также будет виден, если для свойства display установлено значение 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 или более, вы можете расширить этот объект, добавить к нему дополнительные свойства и проверить.

Спасибо @Krzysztof Przygoda за напоминание мне о других свойствах дисплея.

  • 0
    А как насчет 'inline' , 'inline-block' т. Д.? Свойство Display восстанавливается до того, что было изначально. Если элемент имеет отображаемое значение inline, то он скрыт и показан, он снова будет отображаться inline.
  • 0
    Я только что добавил это. Спасибо.
12

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

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

Пример кода

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

    $("#visiblity").click(function()
    {
       if( $('#content').is(':visible') )
       {
          alert("visible"); // Put your code for visibility
       }
       else
       {
          alert("hidden");
       }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<p id="content">This is a Content</p>

<button id="toggle">Toggle Content Visibility</button>
<button id="visibility">Check Visibility</button>
11

Это некоторая опция для проверки того, что тег видимый или нет

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

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

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

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

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

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

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

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

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

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

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

.show{ display: block; }
7

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

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

Точка:

$('element:visible')

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

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

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

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

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

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

Документация по API: https://api.jquery.com/visible-selector/

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

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

1

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

JQuery

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

ваниль

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

Или же

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

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

Вместо того, чтобы писать event для каждого element, выполните следующее:

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

Также вы можете использовать его на входах:

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

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

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

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

Это работает для меня.

Код Css

.hide { display:none; }

Код JQuery

$('.class').on('click', function(){
   $('this').toggleClass('hide');
});
0

$( "# ELEMENT" ). is ( ": visible" );
// проверяем, видимо ли это

0

Вы можете использовать класс css, когда он видимый или скрытый, переключая класс.

.show{ display :block; }

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

В качестве примера,

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

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

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

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

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

0

Очень просто:

if($('#div').is(":visible")) {
    // visible
} else {
    // hide
}
0
$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
0

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

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

Здесь представлен обзор архитектуры model-view-viewmodel (MVVM).

KnockoutJS - это библиотека связывания, которая позволит вам попробовать эту информацию, не изучая всю структуру.

И вот некоторые JS и 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 visibility</button>
</body></html>

Обратите внимание, что функция переключения не обращается к DOM, чтобы определить видимость div, она обращается к модели представления.

  • 0
    Я вижу, что это было отвергнуто без обоснования, даже если оно предоставляет действительно полезную информацию, имеющую отношение к любому, кто задает вопрос. Вот почему я так стараюсь отвечать на вопросы в эти дни: ни одно доброе дело не остается безнаказанным.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню