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

我正在尝试做一个切换，如果元素是block，那么它的显示将变为none，如果元素是block，那么它的显示将变为none。基本上：

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

我给元素ID=item提供了一个ID，但由于某些原因，我的javascript函数不会读取item.style.display

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

测验 项目 { 显示：无； } 函数showalert { var item=document.getElementById'item'； 如果item.style.display==无 { 未显示警报； } 如果item.style.display==块，则为else { 显示警报； } } 分区项目 点击我

---

如果html DIV错误，则需要将元素上的样式显示放到IF works：

<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：警报将不显示

您的html DIV错误，您需要将元素上的样式显示置于if works：

<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：警报将不会显示

CSS样式表设置的样式，如果没有或直接在JS中设置属性，则无法访问标记

下面是一个直接在JS中设置属性的示例：

测验 项目{ 显示：无； } 点击我 分区项目 var item=document.getElementByIditem； item.style.display=无； 功能切换{ item.style.display=item.style.display==none？块：无； }

---

如果不直接在JS中设置属性，则无法访问CSS样式表和标记设置的样式

下面是一个直接在JS中设置属性的示例：

测验 项目{ 显示：无； } 点击我 分区项目 var item=document.getElementByIditem； item.style.display=无； 功能切换{ item.style.display=item.style.display==none？块：无； }

---

您应该在“无”和“空字符串”之间切换“显示”属性，以便替换为默认或继承的显示值，例如

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

另一种方法是添加和删除一个类，因为它更具可扩展性，并且保持逻辑分离，也就是说，您不会混合使用样式和脚本

例如

window.onload=函数{ document.querySelector'button'。addEventListener'click'，showalert，false； } 函数showalertevt{ document.getElementById'item'。classList.toggle'NotShowed'； } .未显示{ 显示：无； } 分区项目

---

单击“我”您应该在“无”和“空字符串”之间切换“显示”属性，以便替换为默认或继承的显示值，例如

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

另一种方法是添加和删除一个类，因为它更具可扩展性，并且保持逻辑分离，也就是说，您不会混合使用样式和脚本

例如

window.onload=函数{ document.querySelector'button'。addEventListener'click'，showalert，false； } 函数showalertevt{ document.getElementById'item'。classList.toggle'NotShowed'； } .未显示{ 显示：无； } 分区项目

---

单击Meitem.style在样式表中看不到设置。相反，检查空字符串或仅检查块，或者更好，添加和删除类以更新样式。item.style在样式表中看不到设置。与其检查空字符串，或者只检查块，或者更好，不如添加和删除一个类来更新样式。谢谢，这很有效。我一开始试过，但我的原始文档中有2个元素，并且只在其中一个元素上添加了内联CSS，所以它不起作用。现在我回去检查并把它放在两个元素上，它终于开始工作了。@Panpaper:但不要这样做。内联样式通常是不受欢迎的。谢谢，这很有效。我一开始试过，但我的原始文档中有2个元素，并且只在其中一个元素上添加了内联CSS，所以它不起作用。现在我回去检查并把它放在两个元素上，它终于开始工作了。@Panpaper:但不要这样做。内联样式通常是不受欢迎的。令人惊讶的答案，我想解决这个问题，但这教会了我一些新的东西。非常感谢。惊人的答案，我想解决这个问题，但这教会了我一些新的东西。非常感谢。