.isVisible()
ВидимостьОпределить, видим ли элемент на веб-странице, отображается или скрыт.
isVisible(element)
Метод .isVisible()
позволяет определить, видимый ли элемент или нет. Отображён элемент в документе или скрыт.
Возвращает логическое значение true
, если содержимое не спрятано, в противном случае вернётся false
.
В функцию можно передать следующий параметр:
Параметр | Тип | По умолчанию | Описание |
---|---|---|---|
element |
String | null |
HTML-элемент |
Использование isVisible()
<div id="example" class="uk-card uk-card-default uk-card-body">Карточка</div>
const myElement = util.$('#example');
// Виден ли элемент?
if (util.isVisible(myElement)) {
console.log('Элемент виден (visible)!')
} else {
console.log('Элемент скрыт (hidden)!')
}
Результат
'Элемент виден (visible)!'
Если нужно проверить видим ли элемент на данный момент времени в окне просмотра или необходимый элемент появляется в поле зрения в окне просмотра при прокрутке страницы, то обрати внимание на JavaScript утилиту util.isInView().
Проверка видимости выпадения
-
Результат: ожидается...
Смотри результат -
<p>Результат: <mark id="result">ожидается...</mark></p> <div class="uk-tile uk-tile-secondary uk-preserve-color uk-padding-large"> <button class="uk-button uk-button-defauult" type="button">Проверить видимость</button> <div id="ex-drop" class="uk-alert-primary" uk-alert uk-drop="offset: 5">Смотри результат</div> </div> <script> const myDrop = util.$('#ex-drop'); util.on(myDrop, 'shown', '.uk-drop.uk-open', checkResult); util.on(myDrop, 'hidden', '.uk-drop:not(.uk-open)', checkResult); function checkResult(e) { if (util.isVisible(e.target)) { result.textContent = "Элемент виден!"; } else { result.textContent = "Элемент НЕ виден!"; } } </script>