通过 Javascript 更改元素的显示？

Question

我有一个搜索栏，上面有一个切换按钮。切换工作正常，但我的问题是我希望表单开始禁用。我的切换按钮使用了display属性，但是当我通过 CSS 将该属性设置为禁用时，切换不再起作用。我还发现 HTML 中没有对应的属性，所以我很迷茫。这是我的 Javascript 旋转到我的 HTML 中：

function ToggleSearchBar() {
  var searchbar = document.getElementById("SearchBar");
  if (searchbar.style.display == "none") {
    searchbar.style.display = "";
  } else {
    searchbar.style.display = "none";
  }
}

.search-button form {
  display: none;
  padding-top: 10px;
}

<div class="search-button">
  <p onclick="ToggleSearchBar()">Search</p>
  <form id="SearchBar">
    <input type="text" placeholder="Your query here">
  </form>
</div>

因此，要重申，我只需要表单元素，以开始与显示器没有的，同时仍然允许我的Javascript功能来起到预期。任何帮助，将不胜感激。谢谢！

Answer 1

这里的问题是element.style.display访问内联样式属性以获取应用于您可以使用getComputedStyle函数的元素的属性

    function ToggleSearchBar() {
        var searchbar = document.getElementById("SearchBar");
       var display = getComputedStyle(searchbar).display;

        if (display == "none") {
                searchbar.style.display = "block";
            } else {
                searchbar.style.display = "none";
            }
        }

.search-button form {
    display: none;
    padding-top: 10px;
}

<div class = "search-button">
        <p onclick = "ToggleSearchBar()">Search</p>
        <form id = "SearchBar">
            <input type = "text" placeholder = "Your query here">
        </form>
    </div>

并且您必须使用 displayblock而不是空字符串，因为您有一个 .css 声明none。