Определение того, виден ли элемент (JavaScript)

У меня есть функция javascript, которая пытается определить, виден ли div, и выполняет различные процессы с этой переменной. Я успешно могу поменять видимость элементов, изменив их отображение между none и block; но я не могу сохранить это значение...

Я попытался получить значение атрибута отображения элементов и выяснить, виден ли идентификатор элемента, но ни один из них не сработал. Когда я пытаюсь использовать .getAttribute, он всегда возвращает значение null; Я не уверен, почему, потому что я знаю, что идентификатор определен и имеет атрибут отображения.

Вот код двух разных методов, которые я пробовал:

var myvar = $("#mydivID").is(":visible");
var myvar = document.getElementById("mydivID").getAttribute("display");

Любое руководство или помощь будет принята с благодарностью.


javascript jquery dom getattribute visible
person Devon Bernard    schedule 27.04.2013    source источник
comment
display является членом свойства style, а не атрибута.   -  person MaxArt    schedule 27.04.2013
comment
@MaxArt: я тоже пытался использовать visible, но это тоже не сработало. Итак, если я не могу вызвать отображение, потому что это свойство CSS, а не атрибут JavaScript, как мне это отслеживать?   -  person Devon Bernard    schedule 27.04.2013
comment
Как определить видимость? Учитываются ли элементы за пределами области просмотра? visibility: hidden тоже считается?   -  person Derek 朕會功夫    schedule 27.04.2013
comment
@DevonBernard Почему $("#mydivID").is(":visible"); не работает?   -  person Ian    schedule 27.04.2013
comment
@Ian I have tried getting the elements display attribute - я думаю, он не возвращает отображаемое значение.   -  person SeinopSys    schedule 27.04.2013
comment
@Ian: Я не уверен, почему видимый метод не сработал ... Я некоторое время читал в Интернете, прежде чем спросить здесь, и люди сказали, что это должно работать; но по какой-то причине это не сработало в моем случае. Хотя я могу использовать этот вызов в этом случае $(this).is(':visible') ? divID: ноль; метод, который я использовал в своем вопросе, не сработал.   -  person Devon Bernard    schedule 27.04.2013
comment
@DJDavid98 DJDavid98 Ах, да, это был ответ на неправильный вопрос.   -  person Ian    schedule 27.04.2013
comment
is(':visible') работает просто отлично, поэтому проблема заключается в другом, и переход к чему-то другому, который в основном делает то же самое, вероятно, не сильно поможет.   -  person adeneo    schedule 27.04.2013
comment
@DevonBernard Итак, что вы пытаетесь найти? Значение стиля display? Или элемент виден? Есть намного больше возможностей узнать, является ли элемент на самом деле видимым, чем просто посмотреть его свойство стиля display.   -  person Ian    schedule 27.04.2013
comment
возможный дубликат Проверка, скрыто ли что-то с помощью jQuery   -  person Paulo Scardine    schedule 28.04.2013

Ответы (5)


arrow_upward
11
arrow_downward

Display — это не атрибут, это свойство CSS внутри атрибута style.

Возможно, вы ищете

var myvar = document.getElementById("mydivID").style.display;

or

var myvar = $("#mydivID").css('display');
person SeinopSys    schedule 27.04.2013

arrow_upward
22
arrow_downward

Попробуйте так:

$(function () {
    // Handler for .ready() called.
    if ($("#mydivID").is(":visible")) {
        alert('Element is visible');
    }
});

FIDDLE

Убедитесь, что файл jQuery включен в тег head, как показано ниже.

<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
person palaѕн    schedule 27.04.2013
comment
@Derek朕會功夫: Потому что в вопросе OP четко указано, что этот подход был предпринят и не сработал. - person ; 27.04.2013
comment
@amnotiam - Хотя он сказал, что это не сработало, код Палаша мне тоже кажется полностью верным. - person Derek 朕會功夫; 27.04.2013
comment
@Derek朕會功夫: Да, это выглядит правильно, но не делает того, что нужно OP. Проблема в том, что мы не знаем точно, что это такое. Возможно, jQuery не определен. Может быть что-то еще. - person ; 27.04.2013
comment
@amnotiam - Что ж, поскольку этот вопрос помечен тегом jQuery, мы предполагаем, что $ определено. - person Derek 朕會功夫; 27.04.2013
comment
Кроме того, OP просто пытается найти свойство стиля display, а не если элемент виден - я пытался получить значение атрибута отображения элементов - person Ian; 27.04.2013
comment
@Ian - Название: Определение того, виден ли элемент - person Derek 朕會功夫; 27.04.2013
comment
@Derek朕會功夫: Нет, возможно, мы можем предположить, что OP предназначен для определения jQuery, но это не значит, что он действительно определен. Моя проблема с этим ответом заключается в том, что в вопросе говорится Вот что я пробовал $("#mydivID").is(":visible"), а ответ Хорошо, тогда попробуйте этот $("#mydivID").is(":visible"), который не добавляет ничего полезного Информация. - person ; 27.04.2013
comment
@Derek朕會功夫 О, я понимаю - заголовок и тело не совсем совпадают. Но их первоочередной задачей, похоже, является поиск свойства display - person Ian; 27.04.2013
comment
@Derek朕會功夫 Кроме того, я не вижу смысла публиковать ответ, который точно дублирует то, что ОП показал, что они пытались без объяснения причин. Их вопрос может быть нелогичным, но имеет больше смысла объяснять ответ и предлагать альтернативы или задавать вопросы заранее. - person Ian; 27.04.2013
comment
@ Ян - Хм, я отчасти согласен с тобой. Но, по крайней мере, он отредактировал свой ответ сейчас. - person Derek 朕會功夫; 27.04.2013
comment
@Derek朕會功夫 Я все еще не думаю, что добавление Include jQuery помогает. Я хочу сказать, что если кто-то хочет опубликовать ответ, который имеет тот же код, что и OP (запутанный вопрос), его следует объяснить. Например, я бы начал с «Ну, вы пытаетесь сделать две разные вещи с помощью .is(":visible") и .getAttribute()». Кажется, вы хотите знать, видимо ли это, но вы также пытаетесь получить только его стиль display. Если вы хотите увидеть, видимо ли это, используйте .is(":visible"), который возвращает логическое значение. Если вам нужно свойство display, используйте: (правильный код для его получения). и включить ссылки - person Ian; 27.04.2013

arrow_upward
12
arrow_downward

Если вы хотите сделать это только с помощью javascript, вы можете попробовать

window.getComputedStyle(document.getElementById("mydivID"),null).getPropertyValue('display')
person Gaurav    schedule 26.09.2016

arrow_upward
8
arrow_downward

Давайте на секунду посмотрим, что .is(":visible") делает в jQuery, не так ли?

Вот ссылка: https://github.com/jquery/jquery/blob/master/src/css.js#L529

return !jQuery.expr.filters.hidden( elem );

куда

jQuery.expr.filters.hidden = function( elem ) {
    // Support: Opera <= 12.12
    // Opera reports offsetWidths and offsetHeights less than zero on some elements
    return elem.offsetWidth <= 0 && elem.offsetHeight <= 0;
};

Итак, это просто проверка ширины и высоты смещения элемента.

Тем не менее, и это также стоит отметить, когда jQuery проверяет, является ли элемент скрытым (например, при запуске события 'toggle'), он выполняет проверку свойства отображения и его существование в доме. https://github.com/jquery/jquery/blob/master/src/css.js#L43

person Nirvana Tikku    schedule 27.04.2013
comment
Честно говоря, это не на самом деле ответ на вопрос. - person SeinopSys; 27.04.2013
comment
Я не уверен, что это за версия jQuery, и мне все равно, но последняя версия делает больше, чем просто это - return elem.offsetWidth <= 0 && elem.offsetHeight <= 0 || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none"); - person Ian; 27.04.2013
comment
ну, это дает некоторое представление о том, почему то, что он пытался, не работает и / или правильный подход, а затем дает представление о том, что следует сделать, то есть получить свойство «отображать», на которое вы уже ответили ... так. ... - person Nirvana Tikku; 27.04.2013
comment
@ Ян, это странно, я ссылаюсь на основную ветку на github ...? - person Nirvana Tikku; 27.04.2013
comment
@NirvanaTikku Я просматривал code.jquery.com/jquery-latest.js - Что для меня показывает 1.9.1. Я не удивлюсь, если мой браузер кеширует эту версию (вместо 2.0), потому что она у меня была открыта некоторое время, которая все еще поддерживает старый IE (и имеет эти дополнительные функции). Интересно - person Ian; 27.04.2013

arrow_upward
0
arrow_downward

var myvar = $(#mydivID).is(:visible); //Этот JQUERY вернет true, если будет виден

var myvar = document.getElementById(mydivID).getAttribute(display); //HERE Display не является атрибутом, поэтому это не даст желаемого результата.

МОЕ РЕШЕНИЕ

1.Select the element using QuerySelector
var myvar= document.querySelector('ELEMENT');

2.Check the OffsetWidth and Offsetheight to be greater than 0;
(myvar.offsetWidth > 0 || myvar.offsetHeight > 0)

3.if myvar is Greater than 0 then it's visble else not.
person Amit Singh    schedule 23.04.2021