.getElementById('').getElementById('').style 不起作用答案

【问题标题】：.getElementById('').getElementById('').style doesnt work.getElementById('').getElementById('').style 不起作用
【发布时间】：2015-05-30 17:31:24
【问题描述】：

Javascript

document.getElementById('menu').getElementById('line1').style.opacity = "0";

HTML

<a href = "#"><div id = "menu" onclick="menu()">
            <div id = "line1">1</div>
            <div id = "line2">1</div>
            <div id = "line3">1</div>
        </div></a>

所以我试图让第一行消失，但由于某种原因它没有运行。 我的语法有问题吗？ 我有额外的 .getElementById('menu') 的原因是因为我有 div id = "menuClose" 可以返回到原来的状态。除非有别的办法？

【问题讨论】：

getElementById() 是仅在 document 对象上的方法。元素（div等）没有这个方法。

标签： javascript html css

【解决方案1】：

为什么要先选择菜单？您可以直接选择该行，因为它是由 id 标识的：

document.getElementById('line1').style.opacity = "0";

JsFiddle here.

如果您想更改另一个 div 中包含的所有 div（在您的情况下，div 中包含的所有 div 都带有 id="menu"），请使用 document.getElementById('menu').childNodes 然后迭代，如图所示 on this SO post

【讨论】：

我有另一个名为 menuClose 的 div 看起来完全一样，它会隐藏所有这些并显示自己？还有其他方法吗？
@skarchmit 使用类和document.getElementsByClassName
您可以选择父级，然后使用childNodes，但此时您必须质疑您的标记，因为 id 必须是唯一的，即没有另一个 id 为 line1 的 div。
并确保menuClose 中的元素与menu 中的元素具有不同的ID。 ID必须在文档中是唯一的。
@EndeNeu document.getElementById('line1').style.WebkitTransform = "rotate(45deg) translate3d(10px,10px,0)"; document.getElementById('line2').style.WebkitTransform = "rotate(-45deg) translate3d(10,-10px,0)"; document.getElementById('line3').style.WebkitTransform = "rotate(45deg) translate3d(10,-10px,0)";当我这样做时，它只会影响第一个，但当它的不透明度时它工作正常。

【解决方案2】：

document.getElementById('line1').style.opacity = "0";

这就是你需要做的。 line1 是一个 id，因此可以使用 getElementById 来检索它，而无需访问父元素。

【讨论】：

【解决方案3】：

请尝试

document.getElementById('line1').style.display='none';

【讨论】：

【解决方案4】：

这很简单，因为你是先选择菜单，但是你可以试试这个方法

document.getElementById('line1').style.display='none';

希望对你有帮助，

【讨论】：