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

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

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

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

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

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

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

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

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

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

И visibleселектор:

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

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'element' is hidden
}

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

Например,

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

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

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

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

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

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

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

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

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

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

:visibleСелектор в соответствии с документацией JQuery :

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

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

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

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

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

Поскольку :visibleэто расширение jQuery, а не часть спецификации CSS, использование запросов :visibleне может воспользоваться преимуществами повышения производительности, обеспечиваемыми собственным querySelectorAll()методом DOM . Чтобы добиться максимальной производительности при использовании :visibleдля выбора элементов, сначала выберите элементы с помощью чистого селектора CSS, а затем используйте .filter(":visible").

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

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

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

Как работает видимость элемента и 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();
  });

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

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

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

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

Демо-ссылка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.foo {
  position: absolute;
  left: 10px;
  top: 10px;
  background: #ff0000;
}

.bar {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background: #0000ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <div class="bar"></div>
</div>

Обновление для jQuery 3.x:

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

JSFiddle с jQuery 3.0.0-alpha1:

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

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

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

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

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

Пример:

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

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

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

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

var $book = $('#book')

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

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

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

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

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

• Ускорьте свой Javascript (YouTube)

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

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

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

Тесты (без поддержки Internet Explorerfilter: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 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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