Скрыть / показать элементы JavaScript

1. Используйте свойство style.visibility, чтобы скрыть / показать элементы HTML
2. Используйте свойство style.display, чтобы скрыть / показать элементы HTML
3. Используйте jQuery hide() / show(), чтобы скрыть / показать элементы HTML
4. Используйте jQuery toggle(), чтобы скрыть / показать элементы HTML
5. Используйте addClass() / removeClass(), чтобы скрыть / показать элементы HTML

Мы часто сталкиваемся с ситуациями, когда мы хотим переключиться между отображением и скрытием элемента. В этом руководстве рассказывается, как скрыть / отобразить элемент в JavaScript.

Используйте свойство style.visibility, чтобы скрыть / показать элементы HTML

Свойство style.visibility, когда установлено значение hidden, делает целевой элемент скрытым, но не удаляет его из потока. Итак, целевой элемент отображается, но не отображается. Это не влияет на планировку и позволяет другим элементам занимать свое естественное пространство. Мы можем снова сделать целевой элемент видимым, вернув для свойства значение visible.

document.getElementById(id).style.visibility = "visible"; // show
document.getElementById(id).style.visibility = "hidden"; // hide

Используйте свойство style.display, чтобы скрыть / показать элементы HTML

Свойство style.display, когда установлено в none, удаляет целевой элемент из обычного потока страницы и позволяет остальным элементам занимать его пространство. Хотя целевой элемент не отображается на странице, мы все равно можем взаимодействовать с ним через DOM. Затрагиваются все потомки, и они не отображаются так же, как родительский элемент. Мы можем снова сделать целевой элемент видимым, установив для свойства значение block. Желательно установить display как '', потому что block добавляет поле к элементу.

document.getElementById(id).style.display = 'none'; // hide
document.getElementById(id).style.display = ''; // show

Используйте jQuery hide() / show(), чтобы скрыть / показать элементы HTML

Метод show() помогает нам отображать элементы, скрытые с помощью метода display:none или jQuery hide(). Он не может отображать элементы, для которых скрыта видимость. Он принимает следующие три параметра:

1. Скорость: определяет скорость задержки эффекта затухания.
2. Замедление: определяет функцию замедления, используемую для перехода в видимое / скрытое состояние. Принимает два разных значения: свинг и линейный.
3. Обратный вызов: это функция, выполняемая после завершения выполнения метода show().

Точно так же метод jQuery hide() помогает скрыть выбранные элементы. Принимает те же 3 параметра, что и show().

$("#element").hide();  // hide
$("#element").show();  // show

Используйте jQuery toggle(), чтобы скрыть / показать элементы HTML

JQuery toggle() - это специальный метод, который позволяет нам переключаться между методами hide() и show(). Это помогает сделать скрытые элементы видимыми, а видимые - скрытыми. Он также принимает те же три параметра, что и методы jQuery hide() и show(). Также требуется отображение 4-го параметра, которое помогает переключать эффект скрытия / отображения. Это логический параметр, который при значении false скрывает элемент.

$("div.d1").toggle(500,swing);  // toggle hide and show

Используйте addClass() / removeClass(), чтобы скрыть / показать элементы HTML

Функция addClass() помогает нам добавить класс в существующий список классов элемента, а removeClass() помогает нам удалить его. Мы можем использовать эти функции для переключения скрытия / отображения, написав собственный класс, скрывающий элемент, а затем добавив и удалив его из списка классов.

.hidden {display:none}
$("div").addClass("hidden");  // hide
$("div").removeClass("hidden"); // show