.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>