Javascript getElementById 找不到 div 即使在文档末尾调用函数

Question

我正在尝试进行切换，将元素的显示更改为 "none"（如果它是 "block"，然后如果它是 "block" 则更改为 "none"。基本上：

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

我为元素指定了一个 ID (id = "item")，但由于某些原因，我的 javascript 函数无法读取 item.style.display

当我执行警报 (item.style.display) 时，我得到一个空警报。在下面的代码中，我没有收到任何警报。

<!DOCTYPE html>

<html>

<head>
    <title>Test</title>
    <style>
        #item
        {
                display: none;
        }
    </style>
    <script>
        function showalert()
        {
                var item = document.getElementById('item');
                
                if (item.style.display == "none")
                {
                    alert("Not shown");
                }
                else if (item.style.display == "block")
                {
                    alert("shown");
                }
        }
    </script>
</head>

<body>
        <div id="item">
                Div item
        </div>
        <button onClick="showalert()">Click Me</button>
</body>
</html>

我以前做过，但我似乎无法复制它。我在这里看了一堆答案，大部分都是在脚本移到文档末尾时解决的。但是，我只在脚本中定义了函数，运行它在文档末尾附近，在 div 元素之后。

谁能告诉我我做错了什么？提前致谢。

Answer 1

你的html DIV错了，你需要把样式显示在你的IF作品的元素上：

<div id="item" style="display:none;">
            Div item
</div>
<button onClick="showalert()">Click Me</button>

function showalert()
    {
            var item = document.getElementById('item');

            if (item.style.display == "none")
            {
                alert("Not shown");
            }
            else if (item.style.display == "block")
            {
                alert("shown");
            }
    }

因此，如果显示元素 DIV 其 none：警报将是 "Not shown"

Answer 2

如果没有 window.getComputedStyle 或直接在 JS 中设置属性，则无法访问由 CSS 样式表（和 <script> 标签）设置的样式。

下面是直接在 JS 中设置属性的例子：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <style>
    #item {
      display: none;
    }
  </style>
</head>

<body>
  <button onclick="toggle()">Click Me</button>
  <div id="item">
    Div item
  </div>

  <script>
    var item = document.getElementById("item");
    item.style.display = "none";

    function toggle() {
      item.style.display = item.style.display === "none" ? "block" : "none";
    }
  </script>
</body>
</html>

以及使用 getComputedStyle 的示例，其中 returns 动态更新的实时 CSSStyleDeclaration 对象：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <style>
    #item {
      display: none;
    }
  </style>
</head>

<body>
  <button onclick="toggle()">Click Me</button>
  <div id="item">
    Div item
  </div>

  <script>
    const item = document.getElementById("item");
    const itemStyle = getComputedStyle(item, null);

    function toggle() {
      item.style.display = itemStyle.display === "none" ? "block" : "none";
    }    
  </script>
</body>
</html>

或者，JS 会识别开箱即用的内联样式，但这不是一个特别可扩展的解决方案。

defer 脚本也是一个好主意，将其包装在 onload 函数中，或者干脆将其移至页面底部。这避免了 JS 尝试访问尚未加载的 DOM 个元素的情况。

Answer 3

您应该在 "none" 和“”（空字符串）之间切换显示属性，以便替代项是默认或继承的显示值，例如

item.style.display = item.style.display == 'none'? '' : 'none';

另一种方法是添加和删除 class，因为它更具可扩展性并且保持逻辑分离，即您不会混合样式和脚本。

例如

window.onload = function() {
  document.querySelector('button').addEventListener('click', showalert, false);
}

function showalert(evt) {
  document.getElementById('item').classList.toggle('notShown');
}

.notShown {
  display: none;
}

 <div id="item" class="notShown">Div item</div>
<button>Click Me</button>

Javascript getElementById 找不到 div 即使在文档末尾调用函数

Javascript getElementById cannot find div even if function is called at end of document

javascript

styles

display