как скрыть элемент в js
Есть несколько способов скрыть элемент на js, основанные на применении стилей. Например, можем задать определенное CSS-правило для атрибута style
самого элемента:
- Используя
display: none
- Используя
visibility: hidden
Оба эти способа скрывают элемент, но разница в том, что элемент, скрытый с помощью display: none
, не занимает места на странице, в отличие от visibility: hidden
.
Рассмотрим вариант применения этих стилей, но с использованием имен CSS-классов и методов classList.add()
, classList.remove()
для их добавления и удаления. Создадим класс с именем hidden, который содержит свойства для скрытия элемента:
.hidden {
display: none;
}
Затем, чтобы скрыть элемент с помощью этого класса, добавим его к элементу:
document.getElementById('myElement').classList.add('hidden');
Чтобы показать элемент снова, удалим класс:
document.getElementById('myElement').classList.remove('hidden');
Такой подход может быть более гибким и удобным в использовании, особенно если вы работаете с множеством элементов на странице.