Как добавить атрибут "hidden" в существующий элемент HTML 5, а затем удалить его из него?

#javascript #html #dom

#javascript #HTML #dom

Вопрос:

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

 <button type="button btn-primary" id="peekaboo-button" hidden>Peekaboo</button>

Затем я могу заставить кнопку появиться, удалив скрытый атрибут с помощью функции removeAttribute в DOM.

 document.getElementById("peekaboo-button").removeAttribute("hidden");

Мне нужно узнать, как добавить скрытый атрибут обратно к элементу button, чтобы снова скрыть его.

Ответ №1:

Для этого вы можете использовать hidden атрибут.

 document.getElementById("peekaboo-button").hidden = true

Это также означает, что если вы хотите его показать, вы можете установить hidden значение false

1. скрытый = true работает для моей цели, это решает ту часть ответа, которой у меня не было. По какой-то причине hidden = false не работает.

2. нет, по какой-то причине у меня это так не работает. Я изучаю это подробнее, чтобы понять, что может быть причиной этой проблемы.

3. @TysonGibby в каком браузере? Вы пробовали мой фрагмент?

4. @mplungjan Мне нравится ваш фрагмент, но мне нужно использовать атрибут hidden, а не стиль display: none. Я использую Chrome 88.0.4324.150

5. @TysonGibby Мой ПЕРВЫЙ фрагмент отлично работает в Chrome, так что же он делает на вашем компьютере?

Ответ №2:

Вот так

 button.hidden=true;

 button.hidden=false;

скрытый

Свойство HTMLElement hidden является логическим значением, которое имеет значение true, если элемент скрыт; в противном случае значение равно false . Это сильно отличается от использования отображения свойств CSS для управления видимостью элемента. Свойство hidden применяется ко всем режимам представления и не должно использоваться для скрытия содержимого, которое предназначено для прямого доступа к пользователю.

 const peekaboo = document.getElementById("peekaboo-button") 
peekaboo.addEventListener("click",function() {
  const but = this;
  but.hidden=true
  setTimeout(function() {  but.hidden=false },1000)
})

 <button type="button btn-primary" id="peekaboo-button">Peekaboo</button>

То же самое, но с class

 const peekaboo = document.getElementById("peekaboo-button") 
peekaboo.addEventListener("click",function() {
  const but = this;
  but.classList.toggle("hide"); // or add
  setTimeout(function() {  but.classList.toggle("hide") },1000)
})

 .hide { display:none }

 <button type="button btn-primary" id="peekaboo-button">Peekaboo</button>