1

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

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

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

5 ответов 5

9

К стилям, прописанным непосредственно в 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: Само собой, поиск элементов по тегу - это только для примера.

3
  • А если у меня несколько дивов, а мне нужно скрыть только один? 17 мар 2020 в 12:43
  • @СергейПлотницкий, в этом случае диву, который надо скрывать - присвойте уникальный идентификатор, например id="la-la-la" и обращайтесь к нему по этому идентификатору var div = document.getElementById('la-la-la')
    – Quazimorda
    17 мар 2020 в 12:48
  • Спасибо большое, разобрался! 18 мар 2020 в 7:43
3

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>

1
  • el.style.display = (el.style.display === "none") ? "block" : "none"; - можно и в таком виде) 17 мар 2020 в 13:52
2

Если необходимо создать кнопку именно через 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>

1
  • А не случится ли бобо, если на странице окажется еще один скрипт с window.onload ?) И не надежнее ли document.addEventListener('DOMContentLoaded', function(){ ... }) 17 мар 2020 в 13:51
0

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

function say() {
  alert('Навёл!');
  document.getElementById('elem').display = 'display ';
}
elem.mouseover = say;
<input type="button" id="elem" onclick="alert('Было')" value="Нажми меня">

1
  • Ну и что это ??
    – Qwertiy
    17 мар 2020 в 12:39
0

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>

4
  • А как сделать, если наоборот, display: block, нужно скрыть по нажатию? Как-то проверку сделать. 17 мар 2020 в 12:28
  • Можно добавить вторую кнопку, которая будет скрывать блок
    – user316624
    17 мар 2020 в 12:29
  • 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" })
    – user316624
    17 мар 2020 в 12:31
  • Это вариант для одной кнопки
    – user316624
    17 мар 2020 в 12:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.