Javascript отобразить скрыть элемент

How to hide and show DOM elements using JavaScript

There are multiple ways to show or hide DOM elements in vanilla JavaScript. In this article, we shall look at two ways to hide or show DOM elements using JavaScript.

The style display property is used to set and get the element’s display type in JavaScript. Majority of the HTML elements have the inline or block display type. The content of an inline element floats to its left and right sides. Block HTML elements are different because they * fill* the entire line and do not show content on their sides. To hide an element, set the display property to none :

document.querySelector('.btn').style.display = 'none' 

document.querySelector('.btn').style.display = 'block' 

Another way to show or hide DOM elements in JavaScript is using the style visibility property. It is similar to the above display property. However, if you set display: none , it hides the entire element from the DOM. The visibility:hidden hides the element contents, and the HTML element stays in its original position and size. To hide an element, set the visibility property to hidden :

document.querySelector('.btn').style.visibility = 'hidden' 

document.querySelector('.btn').style.visibility = 'visible' 

The style visibility property only hides the element but doesn’t remove the space occupied by the element. If you also want to remove the space, set display: none using the display property.

jQuery provides hide() , show() , and toggle() utility methods that use inline styles to update the display property of the element. Let us use the style property to create the above jQuery methods in vanilla JavaScript:

// hide an element const hide = elem =>  elem.style.display = 'none' > // show an element const show = elem =>  elem.style.display = 'block' > // toggle the element visibility const toggle = elem =>  // if the element is visible, hide it if (window.getComputedStyle(elem).display !== 'none')  hide(elem) return > // show the element show(elem) > 

// hide element hide(document.querySelector('.btn')) // show element show(document.querySelector('.btn')) // toggle visibility toggle(document.querySelector('.btn')) 

Notice the use of the getComputedStyle() method, which we just learned the other day, to check if an element is already visible. We used this method because the style property only deals with inline styles specified using the element’s style attribute. But the HTML element could be hidden through an embedded element or an external stylesheet. The getComputedStyle() method returns the actual CSS styles used to render an HTML element, regardless of how those styles were defined. Another thing to notice is the getComputedStyle(elem).display !== ‘none’ statement. We are not checking whether the display type is block because block is not the only way to show an element. You could use flex , inline-block , grid , table , etc., for the display property to show an element. However, to hide an element, there is only one value, display: none . If you prefer to use a CSS class to hide and show DOM elements instead of inline styles, read this guide. ✌️ Like this article? Follow me on Twitter and LinkedIn. You can also subscribe to RSS Feed.

You might also like.

Источник

Скрыть / показать элементы 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

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 :none> $("div").addClass("hidden"); // hide  $("div").removeClass("hidden"); // show 

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

Сопутствующая статья — JavaScript DOM

Источник

Показать и скрыть элемент на JS

На этом уроке вы узнаете, как на языке JavaScript показать и скрыть любой элемент на сайте, кликнув по кнопке.

HTML структура

В HTML разметке присутствует кнопка, имеющая начальное положение «Показать элемент» и скрытый текстовый блок. При клике по кнопке, блок с текстом показывается. При повторном клике по кнопке, данный блок скрывается. Зададим текстовому блоку класс content, отвечающий за оформление и класс hidden. Из названия последнего понятно, что этот класс скрывает контент, пока пользователь не сделает клик по кнопке.

Показать элемент

CSS код

Разукрасим нашу кнопку линейным градиентом и установим легкую тень.

.btn text-decoration: none;
text-align: center;
width: 250px;
padding: 20px 0;
border: solid 1px #004F72;
border-radius: 4px;
font: 20px Arial, Helvetica, sans-serif;
font-weight: bold;
color: #E5FFFF;
background-color: #3BA4C7;
background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
outline: none;
>

.content margin-top: 20px;
padding: 20px;
border: solid 1px rgb(214, 218, 219);
border-radius: 4px;
font-family: Calibri, ‘Trebuchet MS’, sans-serif;
>

.hidden display: none; // скрывает текст
>

JavaScript код

По событию клика по кнопке, у текстового блока должен удалиться класс hidden и тогда блок перестанет быть скрытым. Повторный же клик по кнопке наоборот вешает класс hidden на контентный блок, тем самым скрывая его. Как видите, весь механизм завязан на классе hidden.

Создадим две переменные, которым присвоим кнопку и блок по названиям селекторов. Затем будем отлавливаем событие клика по кнопке с помощью обработчика событий addEventListener. Первым параметром мы передаем событие клика, а вторым параметром название функции btnClick, в которой описываем действия, которые должны произойти после клика по кнопке. Первым делом необходимо найти класс hidden и при помощи метода toggle (переключатель) добавлять класс hidden, если его нет и удалять, если он есть. Кроме того на кнопке должны меняться надписи «Показать элемент / Скрыть элемент». Для этого обратимся к свойству кнопки textContent и создадим условие if-else. Если в блоке с классом content содержится и класс hidden, то поменять на кнопке надпись на «Скрыть элемент». В противном случае оставить, как было «Показать элемент».

const btn = document.querySelector(«.btn»);
const content = document.querySelector(«.content»);

function btnClick() console.log(content.classList);

if (content.classList.contains(«hidden»)) btn.textContent = «Скрыть элемент»;
> else btn.textContent = «Показать элемент»;
>

Демонстрация показа и скрытия элемента

Создано 17.04.2020 10:32:13

Источник