Нахождение элемента видимым (JavaScript)

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

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

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

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

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

5 ответов

Решение

Отображение не является атрибутом, это свойство CSS внутри style приписывать.

Вы можете искать

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

или же

var myvar = $("#mydivID").css('display');

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

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

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

window.getComputedStyle(document.getElementById("mydivID"),null).getPropertyValue('display')

Давайте на секунду посмотрим, что .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'), он проверяет свойство display и его существование в dom. https://github.com/jquery/jquery/blob/master/src/css.js#L43

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

var myvar = document.getElementById("mydivID").getAttribute("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.
Другие вопросы по тегам