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

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

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

+7309
07 окт. '08 в 13:03
источник поделиться
29 ответов
  • 1
  • 2
.is(":not(':hidden')") /*if shown*/
+26
12 апр. '14 в 7:38
источник
if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}
+19
18 авг. '15 в 9:04
источник

Связанные вопросы


Похожие вопросы

Я искал это, и ни один из ответов не подходит для моего случая, поэтому я создал функцию, которая вернет 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;
    }
  }  
});
+19
01 июн. '16 в 6:36
источник

Просто проверьте, является ли этот элемент видимым, и он возвратит логическое значение, 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
}
+16
06 мая '17 в 6:38
источник

Как и 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 за напоминание о других свойствах дисплея.

+16
05 нояб. '16 в 12:26
источник

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

+15
12 апр. '16 в 1:11
источник

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

+15
13 дек. '16 в 9:33
источник

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

$(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>
+14
02 мая '16 в 12:31
источник

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

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

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

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

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

if($('.element').is(':hidden')) {
  // Do something
}
+12
06 дек. '16 в 8:44
источник

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

 // 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  
   // };  
+11
24 авг. '15 в 12:10
источник

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

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

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

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

.show{ display: block; }
+10
04 апр. '16 в 8:21
источник

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

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

Точка:

$('element:visible')

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

$('element:visible').show();
+8
20 мар. '17 в 5:07
источник

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

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
+6
08 авг. '17 в 17:47
источник

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

+4
10 окт. '18 в 15:01
источник

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

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

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

+4
01 дек. '16 в 6:46
источник
if($("h1").is(":hidden")){
    // your code..
}
+3
23 мар. '16 в 13:21
источник

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

JQuery

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

ваниль

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

Или же

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

+3
15 авг. '18 в 1:48
источник

Чтобы быть справедливым вопрос предшествует этому ответу.

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

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

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

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

+2
25 мар. '17 в 8:49
источник

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

0
02 дек. '17 в 17:05

Вы можете использовать класс 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
26 сент. '17 в 9:11
источник

Пытаться

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>
0
12 июн. '19 в 6:46
источник

Решение 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
12 сент. '18 в 9:34
источник

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

<script>
    ($("#myelement").is(":visible"))? alert("#myelement is visible") : alert("#myelement is hidden");
</script>
0
18 июл. '19 в 10:37
источник

Вместо того, чтобы писать 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
29 июл. '18 в 21:07
источник

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

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

if(isHidden($("element")) == true){
    // something
}
0
22 дек. '17 в 20:12
источник
$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
0
29 апр. '17 в 10:25
источник

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

Код Css

.hide { display:none; }

Код JQuery

$('.class').on('click', function(){
   $('this').toggleClass('hide');
});
0
02 дек. '17 в 17:04

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

if($('#div').is(":visible")) {
    // visible
} else {
    // hide
}
0
09 июл. '17 в 12:42
источник

Существует плагин JQuery https://github.com/customd/jquery-visible делает его намного проще

0
24 апр. '19 в 16:17
источник
  • 1
  • 2

Посмотрите другие вопросы по меткам или Задайте вопрос