Нахождение элемента видимым (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');
}
});
Пожалуйста, не забудьте включить файл 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.