即使在文档末尾调用了函数，Javascript getElementById也无法找到div

2024-05-02 • 问答

我正在尝试进行切换，以将元素的显示更改为“无”（如果是“阻止”），然后将其“阻止”更改为“无”。基本上：

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元素之后的文档末尾运行它。

有人可以告诉我我做错了什么吗？预先感谢。

您的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");
            }
    }

因此，如果不显示Element DIV，则警报将为“未显示”

没有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的示例，该示例返回动态更新的实时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元素的情况。

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

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

另一种方法是添加和删除一个类，因为它具有更高的可扩展性并保持逻辑分离，即您没有混合样式和脚本。

例如

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

zhanglin711 回答：即使在文档末尾调用了函数，Javascript getElementById也无法找到div

大家都在问