getElementById().style.display 不起作用答案

【问题标题】：getElementById().style.display does not workgetElementById().style.display 不起作用
【发布时间】：2018-05-22 05:49:53
【问题描述】：

我为<div>制作了一些js代码来显示或消失。

[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("search-bar").style.display，它抛出“”（空白）。

我想知道我将display: none 定义为search-bar 但为什么search-bar 的初始style.display 是空白值？

我该如何解决？

【问题讨论】：

您忘记添加 html 部分，但我的猜测是该 div 上没有样式 display:none。当您检查con.style.display 时，它第一次是空的。 div.style不是计算出来的样式，而是div上style属性的值。
.style 属性仅包含直接在元素上设置的样式。要包含样式表应用的那些，you can use getComputedStyle().
感谢您的评论。我会进一步调查。
你可以做到纯 CSS。

标签： javascript html css

【解决方案1】：

或者，您可以将显示样式移动到另一个类并可以切换类。

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>

【讨论】：

我解决了将样式属性直接添加到标签的问题，但感谢您的回复！
@Hide - 很高兴听到这个消息，但是，我建议尽可能避免使用内联样式。

【解决方案2】：

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

【讨论】：

虽然答案是正确的，但它并没有解释什么是错的

【解决方案3】：

您可以尝试通过 js 将样式初始化为 none：

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

页面加载时。我的猜测是这会起作用。

【讨论】：

【解决方案4】：

[已解决]

首先我将 display: none 添加到 css 文件中。

但是style="display: none"到一个标签之后，就可以正常工作了。

也许我认为有加载优先级，但我不知道究竟是为什么。

【讨论】：

当您将样式属性添加到元素时，它会优先于样式表中定义的样式。因此，它会覆盖显示样式。
@NikhilAggarwal 我明白了。那么，我的payload是一个正常的解决方案吗？
是的。但是，正如在另一个答案的评论中提到的那样，尽量避免使用内联样式。

【解决方案5】：

当您在 css 中设置 display:none 时，它就像 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 = '';
    }
}

它会正常工作

【讨论】：

【解决方案6】：

使用此行代码：

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>

【讨论】：