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

Question

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

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

Answer 1

.is(":not(':hidden')") /*if shown*/

Answer 2

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

Answer 3

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

Answer 4

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

UPDATE:

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

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

Answer 9

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

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

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

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

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

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

Answer 10

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

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