как скрыть элемент в js

Есть несколько способов скрыть элемент на js, основанные на применении стилей. Например, можем задать определенное CSS-правило для атрибута style самого элемента:

1. Используя display: none
2. Используя 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');

Такой подход может быть более гибким и удобным в использовании, особенно если вы работаете с множеством элементов на странице.