getElementById (). style.display не работает

Question

Я сделал несколько js-кодов, чтобы <div> появлялся или исчезал.

[src.js]

openSearch = () => {
    var con = document.getElementById("search-bar");
    if(con.style.display == 'none') {
        con.style.display = 'block';
    } else {
        con.style.display = 'none';
    }
}

[style.css]

#search-bar {
    position: absolute;
    height: 4em;
    width: 20em;
    background-color: white;
    border: 1px solid black;
    padding: 1.5rem;
    right: 0;
    display: none;
}

и добавьте onclick="openSearch()" к тегу <a>.

Когда я нажимаю тег <a> в первый раз, он ничего не работает.

Но нажмите еще раз, он работает правильно.

Поэтому я попытался console.log (document.getElementById ("панель поиска"). Style.display, он выбрасывает "" (пусто).

Интересно, что я определил display: none to search-bar но почему начальный стиль.display search-bar является пустым значением?

И как я могу это исправить?

Answer 1

Используйте этот код строки:

if(con.style.display == 'none' || con.style.display == '') {

openSearch = () => {
    var con = document.getElementById("search-bar");
    if(con.style.display == 'none' || con.style.display == '') {
        con.style.display = 'block';
    } else {
        con.style.display = 'none';
    }
}

#search-bar {
  position: absolute;
  height: 4em;
  width: 20em;
  background-color: white;
  border: 1px solid black;
  padding: 1.5rem;
  right: 0;
  display: none;
}

<div id="search-bar">My Div</div>
<a onclick="openSearch()" href="#">Click</a>

Answer 2

, когда вы устанавливаете display:none в css, это как display="".а не display=none.результат тот же, но если вы проверите display='none' он вернет false .. вы можете попробовать это так:

openSearch = () => {
    var con = document.getElementById("search-bar");
    if(con.style.display == '') {
        con.style.display = 'block';
    } else {
        con.style.display = '';
    }
}

, и он будет работать нормально

Answer 3

[решено]

Сначала я добавляю display: none в файл css.

Но после style="display: none" к тегу он работает правильно.

Может быть, я думаюесть приоритет загрузки, но я не знаю почему именно.

Answer 4

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

openSearch = () => {
    var con = document.getElementById("search-bar");
    con.classList.toggle("hidden");
}

#search-bar {
    position: absolute;
    height: 4em;
    width: 20em;
    background-color: white;
    border: 1px solid black;
    padding: 1.5rem;
    right: 0;
}

.hidden {
  display: none;
}

    <a onclick="openSearch()">Toggle</a>
    <div id="search-bar" class="hidden">Some text here</div>

Answer 5

function openSearch()
 {
       var div = document.getElementById("search-bar");
       if (div.style.display !== "none") {
          div.style.display = "none";
        }
      else {
         div.style.display = "block";
       }
 }

Answer 6

Вы можете попробовать инициализировать стиль с помощью js до none:

document.getElementById("search-bar").style.display = 'none';

Когда страница загружается.Я думаю, это сработает.