Изменить по нажатию свойство display: none/block

Question

У меня есть div, изначально он скрыт

<div style="display: none">Какой-то текст</div>

Хочу добавить кнопку с помощью js, по нажатию на которую если display у блока none - ставит block, а если уже block, наоборот - скрывает. Подскажите пожалуйста, как это сделать?

Answer 1

Если необходимо создать кнопку именно через js (Таким же образом можно просто найти кнопку через аналогичный поиск элемента, если кнопка эта уже есть):

window.onload = function () { // При загрузке страницы
    let main = document.getElementsByClassName('main'); // Ищем родительский блок с классом main
    let button = document.createElement('button'); // Создаём кнопку
    button.innerText = "Название кнопки"; // Добавляем текст в кнопку
    main[0].appendChild(button); // Добавляем кнопку в родителя
    button.onclick = function () { // При нажатии на кнопку
        let div = main[0].children; // Ищем всех children элемента с классом main
        if (div[0].style.display == "none") { // Если div имеет параметр display none, то показываем, в противном случае скрываем.
            div[0].style.display = "block"; // Первый div в этом блоке отображаем (Так же можно добавить ему класс и искать по классу)
        } else {
            div[0].style.display = "none"; // скрываем.
        }
    }
}

<div class="main">
    <div style="display: none">Какой-то текст</div>
</div>

Answer 2

let btn = document.querySelector('button');
let el = document.querySelector('div');

btn.addEventListener('click', () => {
  el.style.display === 'none' ? el.style.display = 'block' : el.style.display = 'none';
});

div {
  width: 100px;
  height: 100px;
  background-color: blue;
}

<div style="display: none">Какой-то текст</div>
<button>Show</button>

Answer 3

К стилям, прописанным непосредственно в style можно обратиться через свойство style:

document.querySelector('button').addEventListener('click', function (e) {
  var div = document.querySelector('div')
  div.style.display = div.style.display === 'none' ? 'block' : 'none'
})

<button>Click me</button>
<div style="display: none">Какой-то текст</div>

Но конкретно с показом и скрытием гораздо лучше воспользоваться свойством hidden, надо только не забыть прописать для соответствующего атрибута !important в стилях - это позволит переключать видимость элементов независимо от того, какой display стоял изначально:

document.querySelector('button').addEventListener('click', function (e) {
  var div = document.querySelector('div')
  div.hidden = !div.hidden
})

[hidden] {
  display: none !important;
}

<button>Click me</button>
<div hidden style="display:flex">Какой-то текст</div>

PS: Само собой, поиск элементов по тегу - это только для примера.

Answer 4

Что то вроде того

function say() {
  alert('Навёл!');
  document.getElementById('elem').display = 'display ';
}
elem.mouseover = say;

<input type="button" id="elem" onclick="alert('Было')" value="Нажми меня">

Answer 5

let content = document.getElementById("content")
let show = document.getElementById("showContent")

show.addEventListener("click", () => {
  if (content.style.display === "block") {
    content.style.display = "none"
  } else {
    content.style.display = "block"
  }
})

<button id="showContent">Показать</button>
<div id="content" style="display:none;">Text</div>

БЛОГ НА HUSL

Изменить по нажатию свойство display: none/block

Ответы (5 шт):