通过Javascript更改元素的显示？答案

【问题标题】：Changing the display of an element via Javascript?通过Javascript更改元素的显示？
【发布时间】：2019-02-20 16:33:08
【问题描述】：

我有一个搜索栏，其正上方有一个切换按钮。切换效果很好，但我的问题是我希望表单 start 禁用。我的切换按钮使用 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>

所以重申一下，我只需要 start 的表单元素 display 没有，同时仍然允许我的 Javascript 按预期运行。任何帮助，将不胜感激。谢谢！

【问题讨论】：

如果您禁用了某些元素，则它不应该工作
我没有禁用它。我只是将显示属性设置为“无”。

标签： javascript html css

【解决方案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>

并且您必须使用显示block 而不是空字符串，因为您有none 的css 声明。

【讨论】：

太完美了。非常感谢

【解决方案2】：

这是因为当您设置display="" 时，它将使用其css 样式none。您应该将显示更改为block。
出于隐藏/显示的目的，我建议您使用Ternary operator

function ToggleSearchBar() {
  var searchbar = document.getElementById("SearchBar");
  if(searchbar.style.display === '') searchbar.style.display = 'block'
  else searchbar.style.display = searchbar.style.display === 'none' ? 'block' : '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>

【讨论】：

效果很好。非常感谢。一旦网站允许，我会接受你的回答
这种方法的唯一问题是style.display 在 HTML 元素上查找内联样式属性。如果您注意到在运行的示例中，您必须按两次“搜索”才能第一次显示它，然后它才能正常工作。
我已经解决了。