Можно ли переключать видимость элемента, используя функции .hide()
, .show()
или .toggle()
?
Как бы вы проверили, является ли элемент visible
или hidden
?
Поскольку вопрос относится к одному элементу, этот код может быть более подходящим:
// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
То же, что и предложение Твернта , но применяется к одному элементу; и это соответствует алгоритму, рекомендованному в jQuery FAQ
Мы используем jQuery is () для проверки выбранного элемента с другим элементом, селектором или любым объектом jQuery. Этот метод перемещается по элементам DOM, чтобы найти совпадение, которое удовлетворяет переданному параметру. Он вернет true, если есть совпадение, иначе вернет false.
visible=false
и display:none
; в то время как решение Моте явно не учитывает намерение кодеров проверить display:none
; (через упоминание о display:none
visible=true
:visible
также проверит, видимы ли родительские элементы, как указал Чиборг. display
свойства. Учитывая, что оригинальный вопрос для show()
и hide()
, и они задают display
, мой ответ правильный. Кстати, он работает с IE7, вот тестовый фрагмент - jsfiddle.net/MWZss ; 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
не будет работать.
hide()
, show()
и toggle()
функции, однако, как большинство из них уже сказал, мы должны использовать :visible
и :hidden
псевдо-классы. type="hidden"
одним только случаем, который может вызвать: скрытый. Элементы без высоты и ширины, элементы с display: none
и элементы со скрытыми предками также будут квалифицироваться как: скрытые. Часто, проверяя, является ли что-то видимым или нет, вы сразу же идете прямо вперед и делаете с этим что-то еще. 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" });
Из Как определить состояние переключаемого элемента?
Вы можете определить , свернут ли элемент или нет, используя :visible
и :hidden
селекторы.
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
Если вы просто воздействуете на элемент, основываясь на его видимости, вы можете просто включить :visible
или :hidden
в выражение селектора. Например:
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');
top:-1000px
... Думаю, это Ни один из этих ответов не относится к тому, что я понимаю, как к вопросу, который я искал: «Как мне обращаться с предметами, которые имеют visibility: hidden
?» , Ни с этим, :visible
ни :hidden
с этим не справятся, так как они оба ищут показ согласно документации. Насколько я мог определить, нет селектора для обработки видимости CSS. Вот как я решил (стандартные селекторы jQuery, может быть более сжатый синтаксис):
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
visibility
буквально, но вопрос был How you would test if an element has been hidden or shown using jQuery?
. Использование jQuery означает: display
свойство. visibility: hidden
или opacity: 0
считаются видимыми, поскольку они по-прежнему занимают место в макете. Смотрите ответ Педро Райнхо и документацию jQuery на :visible
селекторе. Это работает для меня, и я использую show()
и, hide()
чтобы сделать мой div скрытым / видимым:
if( $(this).css('display') == 'none' ){
/* your code goes here */
} else {
/* alternate logic */
}
:visible
Селектор в соответствии с документацией JQuery :
- У них есть
display
значение CSSnone
.- Они являются элементами формы с
type="hidden"
.- Их ширина и высота явно установлены на 0.
- Элемент-предок скрыт, поэтому элемент не отображается на странице.
Элементы с
visibility: hidden
илиopacity: 0
считаются видимыми, поскольку они по-прежнему занимают место в макете.
Это полезно в некоторых случаях и бесполезно в других, потому что если вы захотите проверить, является ли элемент видимым ( display != none
), игнорируя видимость родителей, вы обнаружите, что выполнение .css("display") == 'none'
не только быстрее, но и вернет проверку видимости правильно.
Если вы хотите , чтобы проверить видимость вместо дисплея, вы должны использовать: .css("visibility") == "hidden"
.
Также примите во внимание дополнительные примечания jQuery :
Поскольку
:visible
это расширение jQuery, а не часть спецификации CSS, использование запросов:visible
не может воспользоваться преимуществами повышения производительности, обеспечиваемыми собственнымquerySelectorAll()
методом DOM . Чтобы добиться максимальной производительности при использовании:visible
для выбора элементов, сначала выберите элементы с помощью чистого селектора CSS, а затем используйте.filter(":visible")
.
Кроме того, если вы беспокоитесь о производительности, вам следует проверить Теперь вы видите меня… показать / скрыть производительность (2010-05-04). И используйте другие методы, чтобы показать и скрыть элементы.
Я бы использовал CSS класс .hide { display: none!important; }
.
Для сокрытия / показа я звоню .addClass("hide")/.removeClass("hide")
. Для проверки видимости я использую .hasClass("hide")
.
Это простой и понятный способ проверить / скрыть / показать элементы, если вы не планируете использовать методы .toggle()
или .animate()
методы.
.hasClass('hide')
не проверяет, является ли предок родителя скрытым (что также сделает его скрытым). Вы могли бы заставить это работать правильно, проверив .closest('.hide').length > 0
, но зачем изобретать велосипед? Другой ответ, который вы должны принять во внимание: если вы скрываете элемент, вы должны использовать jQuery , но вместо того, чтобы фактически скрыть его, вы удаляете весь элемент, но копируете его HTML- содержимое и сам тег в переменную jQuery, а затем все, что вам нужно сделать, это проверить, есть ли такой тег на экране, используя обычный if (!$('#thetagname').length)
.
Как работает видимость элемента и 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(); });
visibility:hidden
и opacity:0
заключается в том, что элемент по-прежнему будет реагировать на события (например, щелчки) opacity:0
. Я узнал этот трюк, создав пользовательскую кнопку для загрузки файлов. Можно просто использовать атрибут hidden
or visible
, например:
$('element:hidden')
$('element:visible')
Или вы можете упростить то же самое с IS следующим образом .
$(element).is(":visible")
ebdiv
должен быть установлен в style="display:none;"
. Это работает как для показа, так и для скрытия:
$(document).ready(function(){
$("#eb").click(function(){
$("#ebdiv").toggle();
});
});
Вы также можете сделать это с помощью простого 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 и встроенных стилей
Не требует рамки
visibility: hidden
, что видно . Это может работать:
expect($("#message_div").css("display")).toBe("none");
$('#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="https://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_%282011%29.png" alt="" width="300"/>
Источник:
Чтобы проверить, если он не виден, я использую !
:
if ( !$('#book').is(':visible')) {
alert('#book is not visible')
}
Или следующее также sam, сохраняя селектор jQuery в переменной, чтобы иметь лучшую производительность, когда вам это нужно несколько раз:
var $book = $('#book')
if(!$book.is(':visible')) {
alert('#book is not visible')
}
Используйте переключение классов, а не редактирование стилей. , ,
Использование классов, предназначенных для «сокрытия» элементов, легко, а также является одним из наиболее эффективных методов. Переключение класса «скрытый» со Display
стилем «нет» будет выполняться быстрее, чем непосредственное редактирование этого стиля. Я объяснил кое-что из этого довольно подробно в вопросе переполнения стека. Превращение двух элементов, видимых / скрытых в одном и том же элементе div .
Лучшие практики и оптимизация JavaScript
Вот действительно поучительное видео о Google Tech Talk, разработанном инженером Google Николасом Закасом:
- Ускорьте свой Javascript (YouTube)
Пример:
$(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>
Также вот троичное условное выражение, чтобы проверить состояние элемента и затем переключить его:
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
$('elementToToggle').toggle('slow');
...:)
if($('#postcode_div').is(':visible')) {
if($('#postcode_text').val()=='') {
$('#spanPost').text('\u00a0');
} else {
$('#spanPost').text($('#postcode_text').val());
}
Вы должны проверить оба ... Отображение, а также видимость:
if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
// The element is not visible
} else {
// The element is visible
}
Если мы проверяем $(this).is(":visible")
, jQuery автоматически проверяет обе вещи.
Потому что 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;
}
});
В конце концов, ни один из примеров меня не устраивает, поэтому я написал свой собственный.
Тесты (без поддержки Internet Explorer filter:alpha
):
а) Проверьте, не скрыт ли документ
б) Проверьте, имеет ли элемент нулевую ширину / высоту / непрозрачность или 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
.is(":not(':hidden')") /*if shown*/
:visible
и :hidden
проверяйте видимость элемента CSS и предка, а не только то, display: none
что вы сейчас предлагаете. 2) кавычки внутри псевдо-селектора являются не требуются , если селектор содержит только :
и буквенно - цифровые (например , :not(:hidden)
такие же , как not(':hidden')
(только немного быстрее) и 3) , как вы стали лучше , если вы не можете принять , что вы на самом деле можете быть некорректными иногда? :)При тестировании элемента с :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:
Тогда тот же JS будет иметь такой вывод:
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
Просто проверьте видимость, проверив логическое значение, например:
if (this.hidden === false) {
// Your code
}
Я использовал этот код для каждой функции. В противном случае вы можете использовать is(':visible')
для проверки видимости элемента.
Но что, если CSS элемента похож на следующее?
.element{
position: absolute;left:-9999;
}
Таким образом, этот ответ на вопрос переполнения стека Как проверить, находится ли элемент вне экрана, также должен быть рассмотрен.
Можно создать функцию для проверки атрибутов видимости / отображения, чтобы определить, отображается ли элемент в пользовательском интерфейсе или нет.
function checkUIElementVisible(element) {
return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
Может быть, вы можете сделать что-то вроде этого
$(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>
$(element).is(":visible")
работает для jQuery 1.4.4, но не для jQuery 1.3.2, в Internet & nbsp; Explorer & nbsp; 8 . Это можно проверить с помощью полезного фрагмента теста Цветомира Цонева . Просто не забудьте изменить версию jQuery, чтобы проверить под каждой.