getElementById().style.display不起作用

Question

我编写了一些javascript代码来实现 <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;
}

在 <a> 标签中添加 onclick="openSearch()"。

第一次点击 <a> 标签时，它不起作用。

但是再次点击后，它就能正常工作了。

因此我尝试使用 console.log(document.getElementById("search-bar").style.display) 输出，结果为空白字符。

我想知道为什么我已经将 display: none 定义到 search-bar 上了，但是 search-bar 的初始 style.display 值为空白字符呢？

如何解决这个问题？

- Hide

---

你忘记添加HTML部分了，但我猜测那个div上没有样式display:none。当你检查con.style.display时，第一次它是空的。div.style不是计算出来的样式，而是div上属性style的值。 - dube

.style 属性仅包含直接设置在元素上的样式。要包括样式表应用的样式，您可以使用 getComputedStyle()。 - Jonathan Lonowski

谢谢您的评论。我会进一步调查它。 - Hide

你可以使用纯CSS实现这个。 - VXp

Answer 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>

- Nikhil Aggarwal

---

我已经解决了直接向标签添加样式属性的问题，但还是感谢您的回复！ - Hide

@Hide - 很高兴听到这个消息，不过我建议尽量避免使用内联样式。 - Nikhil Aggarwal

Answer 2

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

- Vishal Lunagariya

---

虽然答案是正确的，但它并没有解释出错的原因。 - dube

Answer 3

[已解决]

首先我在CSS文件中添加了display: none。

但是在标签中添加style="display: none"后，它可以正常工作。

也许是加载优先级的问题，但我不知道具体原因。

- Hide

---

当您将样式属性添加到元素时，它比样式表中定义的样式具有更高的优先级。因此，它会覆盖显示样式。 - Nikhil Aggarwal

@NikhilAggarwal 我明白了。那么，我的有效载荷是一个普通的解决方案？ - Hide

是的，没错。然而，正如在另一个答案的评论中提到的那样，请尽量避免使用内联样式。 - Nikhil Aggarwal

Answer 4

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

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

当页面加载时。我猜那会起作用。

- Justin

Answer 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 = '';
    }
}

它会正常工作

- Yosef Tukachinsky

Answer 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>

- Ehsan