Можно переключить видимость элемента, используя функции .hide()
, .show()
или .toggle()
.
Как бы вы протестировали, если элемент виден или скрыт?
Поскольку вопрос относится к одному элементу, этот код может быть более подходящим:
// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
То же самое, что и предложение твента, но применяется к одному элементу; и это соответствует алгоритму, рекомендованному в jQuery FAQ
visible=false
и display:none
; в то время как решение Моте явно не учитывает намерение кодировщиков проверить display:none
; (через упоминание скрытия и показа, какой элемент управления display:none
не visible=true
)
:visible
также проверит, :visible
ли родительские элементы, как указал chiborg.
Вы можете использовать селектор hidden
:
// Matches all elements that are hidden
$('element:hidden')
И visible
селектор:
// Matches all elements that are visible
$('element:visible')
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
не будет работать.
Ни один из этих ответов не касается того, что я понимаю, и это вопрос, который я искал: "Как обрабатывать элементы с 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
селекторе.
Из Как определить состояние переключаемого элемента?
Вы можете определить, скомплектован ли элемент или нет, с помощью селекторов :visible
и :hidden
.
var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');
Если вы просто воздействуете на элемент, основанный на его видимости, вы можете просто включить :visible
или :hidden
в выражение-селектор. Например:
$('#myDiv:visible').animate({left: '+=200px'}, 'slow');
top:-1000px
... думаю, это top:-1000px
случай
Часто, проверяя, что-то видимо или нет, вы немедленно пойдете прямо вперед и сделаете что-то еще с ним. Цепочка 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
в соответствии с документация jQuery:
- У них есть значение CSS
display
none
.- Это элементы формы с
type="hidden"
.- Их ширина и высота явно установлены на 0.
- Элемент предка скрыт, поэтому элемент не отображается на странице.
Элементы с
visibility: hidden
илиopacity: 0
считаются видимыми, поскольку они все еще потребляют пространство в макете.
Это полезно в некоторых случаях и бесполезно для других, потому что, если вы хотите проверить, является ли элемент видимым (display != none
), игнорируя видимость родительских элементов, вы обнаружите, что выполнение .css("display") == 'none'
происходит не только быстрее, но и также вернет правильность видимости.
Если вы хотите проверить видимость вместо отображения, вы должны использовать: .css("visibility") == "hidden"
.
Также учтите дополнительные примечания jQuery:
Поскольку
:visible
является расширением jQuery, а не частью спецификации CSS, запросы с использованием:visible
не могут воспользоваться повышением производительности, предоставляемым встроенным методом DOMquerySelectorAll()
. Чтобы добиться наилучшей производительности при использовании:visible
для выбора элементов, сначала выберите элементы, используя чистый селектор CSS, затем используйте.filter(":visible")
.
Кроме того, если вас беспокоит производительность, вы должны проверить Теперь вы видите меня... показать/скрыть производительность (2010-05-04), И используйте другие методы для отображения и скрытия элементов.
Как видимость элементов и 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
. Я узнал этот трюк, создав пользовательскую кнопку для загрузки файлов.
Это работает для меня, и я использую show()
и hide()
, чтобы сделать мой div скрытым/видимым:
if( $(this).css('display') == 'none' ){
/* your code goes here */
} else {
/* alternate logic */
}
Я бы использовал CSS class .hide { display: none!important; }
.
Чтобы скрыть/показать, я вызываю .addClass("hide")/.removeClass("hide")
. Для проверки видимости я использую .hasClass("hide")
.
Это простой и понятный способ проверить/скрыть/показать элементы, если вы не планируете использовать методы .toggle()
или .animate()
.
.hasClass('hide')
не проверяет, является ли предок родителя скрытым (что также сделает его скрытым). Вы могли бы заставить это работать правильно, проверив, если .closest('.hide').length > 0
, но зачем изобретать велосипед?
Вы также можете сделать это, используя обычный 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
чтобы быть видимой .
Можно просто использовать атрибут hidden
или visible
, например:
$('element:hidden')
$('element:visible')
Или вы можете упростить то же самое с помощью следующего.
$(element).is(":visible")
$('#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="" />
Источник:
Еще один ответ, который вы должны учесть: если вы скрываете элемент, вы должны использовать jQuery, но вместо того, чтобы скрывать его, вы удаляете весь элемент, но вы копируете его HTML, а сам тег в переменную jQuery, а затем все, что вам нужно сделать является тестом, если на экране есть такой тег, используя обычный if (!$('#thetagname').length)
.
ebdiv
должно быть установлено значение style="display:none;"
, Это работает как для показа, так и для скрытия:
$(document).ready(function(){
$("#eb").click(function(){
$("#ebdiv").toggle();
});
});
При тестировании элемента с селектором :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:
Тот же JS будет иметь этот вывод:
console.log($('.foo').is(':hidden')); // false
console.log($('.bar').is(':hidden')); // false
Это может работать:
expect($("#message_div").css("display")).toBe("none");
Пример:
$(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>
Использование классов, предназначенных для "скрытия" элементов, является простым, а также одним из наиболее эффективных методов. Переключение класса 'hidden' с типом Display
'none' будет выполняться быстрее, чем редактирование этого стиля напрямую. Я подробно объяснил некоторые из этих вопросов в вопросе Поворот двух элементов, видимых/скрытых в одном и том же div.
Вот поистине поучительное видео в Google Tech Talk от главного инженера Google Николаса Закаса:
Чтобы проверить, не видно ли это, я использую !
:
if ( !$('#book').is(':visible')) {
alert('#book is not visible')
}
Или следующее: sam, сохраняя селектор jQuery в переменной, чтобы иметь лучшую производительность, когда вам это нужно несколько раз:
var $book = $('#book')
if(!$book.is(':visible')) {
alert('#book is not visible')
}
Пример использования проверки видимой для рекламного блока:
$(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" - это идентификатор, который блокирует блок. Поэтому, проверяя это, если он виден, вы можете обнаружить, включен ли рекламный блок.
В конце концов, ни один из примеров не подходит мне, поэтому я написал свой собственный.
Тесты (без поддержки 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
Вам нужно проверить оба... Отображать, а также видимость:
if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") {
// The element is not visible
} else {
// The element is visible
}
Если мы проверим $(this).is(":visible")
, jQuery автоматически проверяет обе вещи.
Может быть, вы можете сделать что-то вроде этого
$(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>
Потому что 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;
}
});
Но что, если элемент CSS выглядит следующим образом?
.element{
position: absolute;left:-9999;
}
So этот ответ на вопрос о переполнении стека. Как проверить, является ли элемент вне экрана, также следует учитывать.
if($('#postcode_div').is(':visible')) {
if($('#postcode_text').val()=='') {
$('#spanPost').text('\u00a0');
} else {
$('#spanPost').text($('#postcode_text').val());
}
Функция может быть создана для проверки атрибутов видимости/отображения, чтобы определить, отображается ли элемент в пользовательском интерфейсе или нет.
function checkUIElementVisible(element) {
return ((element.css('display') !== 'none') && (element.css('visibility') !== 'hidden'));
}
Просто проверьте видимость, проверив логическое значение, например:
if (this.hidden === false) {
// Your code
}
Я использовал этот код для каждой функции. В противном случае вы можете использовать is(':visible')
для проверки видимости элемента.
Также здесь имеется тернарное условное выражение для проверки состояния элемента, а затем для его переключения:
$('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); });
$('elementToToggle').toggle('slow');
... :)
.is(":not(':hidden')") /*if shown*/
:visible
и :hidden
проверить элемент CSS и видимость предка, а не только display: none
как вы сейчас предлагаете. 2) кавычки внутри псевдоселектора не требуются, если селектор содержит только :
и буквенно-цифровые символы (например, :not(:hidden)
совпадает с not(':hidden')
(только немного быстрее) и 3) как вы будете стать лучше, если вы не можете признать, что иногда вы на самом деле ошибаетесь? :)
Я искал это, и ни один из ответов не подходит для моего случая, поэтому я создал функцию, которая вернет 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;
}
}
});
var items = jQuery('.selector'); if (items.length == 0 || !items.isVisible()) { alert('item is not visible'); }
if($('#id_element').is(":visible")){
alert('shown');
}else{
alert('hidden');
}
Вот как 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
, пока элемент будет виден.
Существует несколько способов проверить, является ли элемент видимым или скрытым в 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/
Просто проверьте, является ли этот элемент видимым, и он возвратит логическое значение, 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
}
Как и hide()
, show()
и toggle()
присоединяет встроенный CSS (display: none или display: block) к элементу. Точно так же мы можем легко использовать троичный оператор, чтобы проверить, скрыт или видим элемент погоды, проверяя отображение css.
ОБНОВИТЬ:
Таким образом, мы можем проверить свойство элемента, которое делает его невидимым. Таким образом, они 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 за напоминание мне о других свойствах дисплея.
'inline'
, 'inline-block'
т. Д.? Свойство Display восстанавливается до того, что было изначально. Если элемент имеет отображаемое значение inline, то он скрыт и показан, он снова будет отображаться inline.
Вы можете использовать это:
$(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>
Это некоторая опция для проверки того, что тег видимый или нет
// 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
// };
Я просто хочу уточнить, что в jQuery,
Элементы могут считаться скрытыми по нескольким причинам:
- У них есть CSS отображаемое значение none.
- Они являются элементами формы с type = "hidden".
- Их ширина и высота явно установлены на 0.
- Элемент-предок скрыт, поэтому элемент не отображается на странице.
Элементы с видимостью: скрытый или непрозрачность: 0 считаются видимыми, поскольку они по-прежнему занимают место в макете. Во время анимации, которая скрывает элемент, элемент считается видимым до конца анимации.
Источник: скрытый Селектор | Документация по API jQuery
if($('.element').is(':hidden')) {
// Do something
}
Вы можете просто добавить класс, когда он будет виден. Добавьте класс show
. Затем проверьте, есть ли у него класс:
$('#elementId').hasClass('show');
Он возвращает true, если у вас есть класс show
.
Добавьте CSS следующим образом:
.show{ display: block; }
Слишком много методов для проверки скрытых элементов. Это лучший выбор (я только что вам рекомендовал):
Используя jQuery, создайте элемент "display: none" в CSS для скрытых.
Точка:
$('element:visible')
И пример использования:
$('element:visible').show();
Просто проверьте атрибут display
(или visibility
в зависимости от того, какую именно невидимость вы предпочитаете). Пример:
if ($('#invisible').css('display') == 'none') {
// This means the HTML element with ID 'invisible' has its 'display' attribute set to 'none'
}
Вы можете использовать
$( "div:visible" ).click(function() {
$( this ).css( "background", "yellow" );
});
$( "button" ).click(function() {
$( "div:hidden" ).show( "fast" );
});
Документация по API: https://api.jquery.com/visible-selector/
if($("h1").is(":hidden")){
// your code..
}
<script>
if ($("#myelement").is(":visible")){alert ("#myelement is visible");}
if ($("#myelement").is(":hidden")){alert ("#myelement is hidden"); }
</script>
$("#myelement div:visible").each( function() {
//Do something
});
Вот как jQuery реализует эту функцию:
jQuery.expr.filters.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};
Используя 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
Иногда, если вы хотите проверить, виден ли элемент на странице, в зависимости от видимости его parrent, вы можете проверить, равны ли width
и height
элемента 0
.
JQuery
$element.width() === 0 && $element.height() === 0
ваниль
element.clientWidth === 0 && element.clientHeight === 0
Или же
element.offsetWidth === 0 && element.offsetHeight === 0
Решение 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>
Вместо того, чтобы писать 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');
}
});
Вы можете сделать это:
isHidden = function(element){
return (element.style.display === "none");
};
if(isHidden($("element")) == true){
// something
}
Это работает для меня.
Код Css
.hide { display:none; }
Код JQuery
$('.class').on('click', function(){
$('this').toggleClass('hide');
});
$( "# ELEMENT" ). is ( ": visible" );
// проверяем, видимо ли это
Вы можете использовать класс 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
).
Очень просто:
if($('#div').is(":visible")) {
// visible
} else {
// hide
}
$('someElement').on('click', function(){ $('elementToToggle').is(':visible')
Чтобы быть справедливым, вопрос предшествует этому ответу. Я добавляю это, чтобы не критиковать ОП, а помогать кому-либо еще задавать этот вопрос.
Правильный способ определить, видимо ли что-либо, - это обратиться к вашей модели представлений. Если вы не знаете, что это значит, тогда вы собираетесь отправиться в путешествие по открытию, что сделает вашу работу намного менее трудной.
Здесь представлен обзор архитектуры 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, она обращается к модели представления.
$(element).is(":visible")
работает для jQuery 1.4.4, но не для jQuery 1.3.2, в Internet & nbsp; Explorer & nbsp; 8 . Это можно проверить с помощью полезного фрагмента теста Цветомира Цонева . Просто не забудьте изменить версию jQuery, чтобы протестировать под каждой.