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

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

8016
Philip Morton 7 Окт 2008 в 17:03

28 ответов

Лучший ответ

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

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

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

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

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

9316
Ravi Makwana 11 Окт 2019 в 04:19

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

119
Lucas 26 Мар 2013 в 22:12

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

$(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>
41
Abrar Jahin 2 Май 2016 в 12:59

демонстрационная ссылка

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

138
Adder 27 Авг 2019 в 07:08

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

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

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

Б) Проверьте, имеет ли элемент нулевую ширину / высоту / непрозрачность или 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
58
Peter Mortensen 28 Апр 2014 в 18:10

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

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
30
cssimsek 5 Ноя 2013 в 23:32

Примере:

$(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>
75
dippas 16 Июл 2017 в 13:52

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

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

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

161
Lucas 19 Мар 2014 в 08:15

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

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

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

51
Peter Mortensen 19 Июл 2014 в 15:23

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

function isElementReallyHidden (el) {
    return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0;
}

var booElementReallyShowed = !isElementReallyHidden(someEl);
$(someEl).parents().each(function () {
    if (isElementReallyHidden(this)) {
        booElementReallyShowed = false;
    }
});
34
Andron 20 Мар 2014 в 10:32

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


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

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

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

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
387
Chris 12 Янв 2016 в 14:08

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

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
522
Andrii Abramov 26 Июн 2017 в 07:12

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

Тогда тот же JS будет иметь такой вывод:

console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
98
Al Foиce ѫ 6 Авг 2016 в 08:53
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 не будет работать.

935
Shadow 2 Авг 2018 в 06:57

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

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

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

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
67
Peter Mortensen 14 Сен 2013 в 08:01

Часто, проверяя, является ли что-то видимым или нет, вы сразу же идете прямо вперед и делаете с этим что-то еще. 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" });
290
ecarrizo 27 Апр 2015 в 20:10

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

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

60
Cameron 13 Сен 2016 в 14:07

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

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

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

30
Peter Mortensen 22 Ноя 2014 в 11:23

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

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
211
webvitaly 14 Дек 2015 в 21:32

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

160
Lucas 19 Мар 2014 в 08:15

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

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
131
Community 26 Окт 2018 в 07:33
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
30
dcodesmith 7 Дек 2013 в 13:51

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

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

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

37
dippas 16 Июл 2017 в 13:56

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

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

И visible:

// Matches all elements that are visible
$('element:visible')
1444
twernt 8 Мар 2018 в 15:38

Но что, если CSS элемента похож на следующее?

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

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

32
Community 23 Май 2017 в 11:55

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

expect($("#message_div").css("display")).toBe("none");
89
Lucas 6 Мар 2013 в 06:41

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

240
Pang 21 Июн 2017 в 01:41

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

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

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

$(element).is(":visible")
134
Peter Mortensen 16 Мар 2013 в 10:04