it-swarm.com.ru

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

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

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

7074
Philip Morton

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

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

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

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

8738
Tsvetomir Tsonev

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

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

И visible селектор:

// Matches all elements that are visible
$('element:visible')
1339
twernt
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 не будет работать.

850
Mote

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

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

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


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

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

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

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

Часто, проверяя, является ли что-то видимым или нет, вы собираетесь немедленно пойти дальше и сделать что-то еще с этим. 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" });
259
Simon_Weaver

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

211
Pedro Rainho

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

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

Как видимость элемента и jQuery работает;

Элемент может быть скрыт с помощью display:none, visibility:hidden или opacity:0. Разница между этими методами:

  • display:none скрывает элемент и не занимает места;
  • visibility:hidden скрывает элемент, но он все еще занимает место в макете;
  • opacity:0 скрывает элемент как «visibility: hidden», и он все еще занимает место в макете; единственное отличие состоит в том, что непрозрачность позволяет сделать элемент частично прозрачным; 

    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();
    });
    
185
webvitaly

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

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

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

146
Evgeny Levin

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

141
Matt Brock

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

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

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

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

Демо-ссылка 

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

111
Code Spy

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

110
think123

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

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

При тестировании элемента с помощью селектора :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
85
conceptdeluxe

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

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

Пример: 

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

63
Irfan DANISH

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

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

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

var $book = $('#book')

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

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

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


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

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

59
Lopsided

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

56
Roman Losev

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

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

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

б) Проверьте, имеет ли элемент нулевую ширину/высоту/непрозрачность или display:nonevisibility:hidden во встроенных стилях

c) Убедитесь, что центр (и потому что он быстрее, чем тестирование каждого пикселя/угла) элемента не скрыт другим элементом (и всеми предками, например: overflow:hidden/scroll/one element over enother) или краями экрана

d) Проверьте, имеет ли элемент нулевую ширину/высоту/непрозрачность или display:none/visibility: скрытый в вычисляемых стилях (среди всех предков)

_/Проверено на

Android 4.4 (собственный браузер/Chrome/Firefox), Firefox (Windows/Mac), Chrome (Windows/Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (режимы документов Internet Explorer 5-11 + Интернет 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
Aleko

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

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

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

50
Premshankar Tiwari

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

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

Поскольку 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;
    }
});
32
Andron

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

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

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

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

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

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

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

30
RN Kushwaha

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

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

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

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

Работает Fiddle

29
V31
.is(":not(':hidden')") /*if shown*/
25
Kareem

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

Вот как 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
Oriol

Просто проверьте, является ли этот элемент видимым , и он вернет boolean , 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
}
14
Alireza

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

Так как hide(), show() и toggle() присоединяет встроенный css (display: none или display: block) к элементу . Аналогично, мы можем легко использовать троичный оператор для проверки того, что элемент погоды скрыт или видим, проверяя display 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 за напоминание о других свойствах дисплея.

14
No one

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

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

13
Abrar Jahin

Это какой-то вариант, чтобы проверить, что тег виден или нет

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

11
Sangeet Shah

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

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

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

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

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

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

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

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

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

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

.show{ display: block; }
9
Sahan

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

Используя jQuery, создайте элемент «display: none» в CSS для hidden.

Дело в том:

$('element:visible')

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

$('element:visible').show();
7
Abdul Aziz Al Basyir

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

if ($('#invisible').css('display') == 'none') {
    // This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
5
Antoine Auffray

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

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

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

4
Wolfack

1 • решение jQuery

Методы, чтобы определить, видим ли элемент в JQuery

<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>

Зацикливание на всех visible 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

3
Lyes CHIOUKH
if($("h1").is(":hidden")){
    // your code..
}
3
cbertelegni

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

jQuery

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

Ваниль

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

Или же

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

2
Profesor08

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

Вместо того, чтобы писать 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
user10145552

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

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

if(isHidden($("element")) == true){
    // something
}
0
user8903269

решение 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's 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
Muhammad
$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
0
user6119825

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

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

Вот краткий обзор модель-вид-вид-модель архитектура (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's visibility</button>
</body></html>

Обратите внимание, что функция переключения не обращается к DOM для определения видимости div, она обращается к модели представления.

0
Peter Wone