Question

我为<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为空值？

我该如何解决？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

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

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

页面加载时我的猜测是工作。

Answer 4

[解决]

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

但在style="display: none"标记后，它才能正常运行。

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

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

它会正常工作

Answer 6

使用此行代码：

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

getElementById（）。style.display不起作用

6 个答案: