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


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

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

6967
javascriptjquerydomvisibility
опубликован 07 окт. '08 в 16:03 2008-10-07 16:03
источник
56 ответов

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

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

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

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

8594
ответ дан 07 окт. '08 в 16:30
источник

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

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

И visible селектор:

// Matches all elements that are visible
$('element:visible')
1318
ответ дан 07 окт. '08 в 16:16
источник
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 не будет работать.

831
ответ дан 07 окт. '08 в 16:09
источник

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

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});
474
ответ дан 24 марта '11 в 21:44
источник

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


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

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

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

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');
343
ответ дан 14 янв. '11 в 0:13
источник

Часто, проверяя, что-то видимо или нет, вы немедленно пойдете прямо вперед и сделаете что-то еще с ним. Цепочка 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" });
253
ответ дан 25 июля '09 в 13:21
источник

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

206
ответ дан 25 нояб. '11 в 12:16
источник

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

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}
187
ответ дан 06 июля '11 в 23:19
источник

Как видимость элементов и 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();
    });
    
181
ответ дан 25 апр. '12 в 0:04
источник

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

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

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

145
ответ дан 03 февр. '12 в 19:04
источник

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

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

140
ответ дан 16 июля '12 в 22:18
источник

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

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

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

$(element).is(":visible")
120
ответ дан 23 мая '12 в 15:59
источник

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

110
ответ дан 22 апр. '12 в 2:40
источник

Демо-ссылка

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

105
ответ дан 25 янв. '13 в 8:34
источник

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

$(document).ready(function(){
    $("#eb").click(function(){
        $("#ebdiv").toggle();
    });    
});
103
ответ дан 13 июня '12 в 16:20
источник

При тестировании элемента с селектором :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
85
ответ дан 06 мая '14 в 13:50
источник

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

expect($("#message_div").css("display")).toBe("none");
82
ответ дан 20 июля '12 в 15:44
источник

Пример:

$(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>
62
ответ дан 28 окт. '13 в 9:43
источник

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

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

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

var $book = $('#book')

if(!$book.is(':visible')) {
    alert('#book is not visible')
}
61
ответ дан 04 июня '13 в 16:42
источник

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

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


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

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

59
ответ дан 19 июля '13 в 0:17
источник

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

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

55
ответ дан 27 апр. '15 в 10:57
источник

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

Тесты (без поддержки 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
55
ответ дан 09 апр. '14 в 20:06
источник

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

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

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

50
ответ дан 31 янв. '14 в 9:24
источник

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

$(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>
38
ответ дан 07 апр. '15 в 15:26
источник

Потому что 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;
    }
});
32
ответ дан 19 марта '14 в 15:42
источник
if($('#postcode_div').is(':visible')) {
    if($('#postcode_text').val()=='') {
        $('#spanPost').text('\u00a0');
    } else {
        $('#spanPost').text($('#postcode_text').val());
}
30
ответ дан 15 нояб. '13 в 13:41
источник

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

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

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

30
ответ дан 23 авг. '14 в 23:53
источник

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

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

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

30
ответ дан 11 авг. '14 в 8:28
источник

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

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

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

29
ответ дан 29 авг. '14 в 23:20
источник

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

$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
29
ответ дан 06 нояб. '13 в 2:32
источник
.is(":not(':hidden')") /*if shown*/
24
ответ дан 12 апр. '14 в 10:38
источник

Я искал это, и ни один из ответов не подходит для моего случая, поэтому я создал функцию, которая вернет 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 в 9:36
источник
if($('#id_element').is(":visible")){
   alert('shown');
}else{
   alert('hidden');
}
17
ответ дан 18 авг. '15 в 12:04
источник

Вот как 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 в 4: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/

14
ответ дан 13 дек. '16 в 12:33
источник

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

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

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

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

12
ответ дан 05 нояб. '16 в 15:26
источник

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

 // 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 в 15:10
источник

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

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

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

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

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

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

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

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

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

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

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

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

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

Точка:

$('element:visible')

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

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

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

$( "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 в 9:46
источник

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

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
4
ответ дан 08 авг. '17 в 20:47
источник
if($("h1").is(":hidden")){
    // your code..
}
3
ответ дан 23 марта '16 в 16:21
источник

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

2
ответ дан 10 окт. '18 в 18:01
источник

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

JQuery

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

ваниль

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

Или же

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

1
ответ дан 15 авг. '18 в 4:48
источник

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

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

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

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

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

if(isHidden($("element")) == true){
    // something
}
0
ответ дан 22 дек. '17 в 23:12
источник

Вместо того, чтобы писать 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
ответ дан 30 июля '18 в 0:07
источник
$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
0
ответ дан 29 апр. '17 в 13:25
источник

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

Код Css

.hide { display:none; }

Код JQuery

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

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

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

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

Здесь представлен обзор архитектуры 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
ответ дан 25 марта '17 в 11:49
источник

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

0
ответ дан 02 дек. '17 в 20:05

Игры в 30 строк кода:


Гонки на JS. Поехали!

Ball на JS. Поехали!

Интересные вопросы: