как я могу проверить, если элемент скрыт в jquery?

.hide().show().toggle()

it is possible to toggle the visibility of an element, using the functions , or ?

how would you test if an element is visible or hidden?

Ответ 1

since the question refers to a single element, this code might be more suitable:

// checks css for display:[none|block], ignores visibility:[true|false]$(element).is(":visible"); // the same works with hidden$(element).is(":hidden");

twernt's suggestion matches the algorithm recommended in the jquery faq

same as , but applied to a single element; and it

Ответ 2

hidden

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

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

visible

а селектор:

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

Ответ 3

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>

описанный выше метод будет рассматривать <код>раздел 2 при <код>:доступно нет. но выше может быть полезно во многих случаях, особенно когда нужно найти, если есть какие-либо ошибки дивс виден в скрытых родителем, потому что в таких условиях <код>:доступно не будет работать.

Ответ 4

"how do i handle items that have visibility: hidden?":visible:hidden

ни один из этих ответов-адрес насколько я понимаю, вопрос, что я искал, . ни разберусь с этим, как они оба искали отображения в документации. насколько я мог определить, нет селектора для обработки видимость в css. вот как я решил его (стандартный jquery селекторы, там может быть более сокращенный синтаксис):

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

Ответ 5

how do i determine the state of a toggled element?

от

:visible:hidden

вы можете определить, является ли элемент свернут или не с помощью селекторов.

var isvisible = $('#mydiv').is(':visible');var ishidden = $('#mydiv').is(':hidden');

:visible:hidden

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

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

Ответ 6

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

Ответ 7

:visiblethe jquery documentation

селектор по данным :

they have a css display value of none.
they are form elements with type="hidden".
their width and height are explicitly set to 0.
an ancestor element is hidden, so the element is not shown on the page.

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

display != none.css("display") == 'none'

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

.css("visibility") == "hidden"

если вы хотите проверить видимость вместо дисплея, вы должны использовать: .

the additional jquery notes

также учитывать :

поскольку <код>:доступно - это jquery расширения, а не в css спецификации, запросы, используя <код>:доступно не может воспользоваться производительности обеспечивается родной дом <код>queryselectorall() при способ. для достижения наилучшей производительности при использовании <код>:доступно, чтобы выбрать элементы, сначала выберите элементы с помощью чистого css-селектор, а затем использовать <код>.фильтр ("видимые").

now you see me… show/hide performance

также, если вы беспокоитесь о производительности, вы должны проверить (2010-05-04). и использовать другие методы для показа и скрытия элементов.

Ответ 8

show()hide()

это работает для меня, и я использую и сделать мой див скрытый/видимый:

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

Ответ 9

<а href="http://web-profile.net/jquery/dev/jquery-element-visible-hidden/" рел="noreferrer">элемент видимости и jquery работаетв

как

display:nonevisibility:hiddenopacity:0

элемент может быть скрыт , или . разница между этими методами:

<код>дисплей:нет скрывает элемент, и он не занимает никакого пространства<код>видимость:скрытый скрывает элемент, но он по-прежнему занимает место в макете.<п><код>непрозрачность:0 скрывает элемент, как "видимость:скрытый", и он по-прежнему занимает место в макете.

Ответ 10

.hide { display: none!important; }

я хотел бы использовать css-класс .

.addclass("hide")/.removeclass("hide").hasclass("hide")

для скрытия/показывает, я называю . для проверки видимости, я использую .

.toggle().animate()

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

Ответ 11

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

Ответ 12

hiddenvisible

можно просто использовать или атрибута, такого как:

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

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

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

Ответ 13

<а href="https://freakyjolly.com/demo/check-if-visible-or-hidden-jquery.html в" rel="noreferrer">демо ссылка

$('#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 tools and widgets: how to see if element is hidden or visible using jquery

Ответ 14

ebdivstyle="display:none;"

должен быть установлен на . это работает как для показа и скрытия:

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

Ответ 15

jquery htmlif (!$('#thetagname').length)

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

Ответ 16

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

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

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

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

explicitlyimplicitly

так это на самом деле имеет смысл в отношении к коробке-модель и вычисленный стиль элемента. даже если ширина и высота не равны 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.х:

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

jsfiddle с jquery 3.0.0-альфа1:

http://jsfiddle.net/pm2q3/7/

тот же js и потом будет этот результат.

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

Ответ 17

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

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

Ответ 18

пример:

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

Ответ 19

!

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

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

или следующий тоже сам, сэкономив селектор jquery в переменную, чтобы иметь более высокую производительность, когда вам это нужно несколько раз.

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

Ответ 20

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

displayturning two elements visible/hidden in the same div

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

лучшие практики javascript и оптимизации

вот поистине поучительное видео в google тек соединиться с гуглом передний конец инженера николай zakas:

<сильный><а href="http://www.youtube.com/watch?v=mhtdzgou0qu в" rel="noreferrer">ускорить ваш javascript (на youtube)

Ответ 21

видно

пример использования проверки антибаннер включается:

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

Ответ 22

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

тестыfilter:alpha

(без поддержки интернет-обозревателя ):

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

display:nonevisibility:hidden

б) проверить, если элемент имеет нулевую ширина / высота / прозрачность или / во встроенных стилей

overflow:hidden

c) проверьте, если в центре (еще и потому, что это быстрее, чем проверка всех пикселей / угол) элемент не скрыт от другого элемента (и всех предков, пример: / свиток / одного элемента через другие) или краям экрана

display:none

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

проверено наpresto

андроид 4.4 (родной браузер/хром/firefox), браузер firefox (windows и mac), chrome (для windows и mac), опера (windows и mac на базе webkit), интернет explorer (интернет эксплорер 5-11 документа режимы интернет эксплорер 8 на виртуальной машине), сафари (ос 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

Ответ 23

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

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

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

если мы проверяем , проверяет jquery для обоих вещи автоматически.

Ответ 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>

Ответ 25

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

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

is(':visible')

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

Ответ 26

elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layoutjquery :visible selectorreally

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

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

Ответ 27

но что если css элемента является следующим?

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

this answer to stack overflow question how to check if an element is off-screen

поэтому также должны быть рассмотрены.

Ответ 28

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

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

Ответ 29

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