主页 / 问题 / 1095805
Accepted
Сергей Плотницкий
Asked:2020-03-17 19:52:39 +0000 UTC2020-03-17 19:52:39 +0000 UTC

更改属性显示：无/单击时阻止

  • 772

我有一个 div，最初它是隐藏的

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

我想使用js添加一个按钮，通过点击它，如果块的显示为none，它就会放置一个块，如果它已经是一个块，则相反，它会隐藏它。请告诉我该怎么做？

javascript

5 个回答

  1. Best Answer

    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>

    但特别是显示和隐藏，最好使用 property hidden，你只需要记住!important在样式中设置相应的属性 - 这将允许你切换元素的可见性，无论最初设置什么显示：

    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：当然，通过标签搜索元素只是一个例子。

    • 9 

  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>

    • 3

  3. 如果需要专门通过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>

    • 2

  4. 类似的东西

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

    • 0 

  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>

    • 0

相关问题