Question

我有一个网页，用于覆盖游戏图像地图上的村庄和警卫塔位置。我创建了一个javascript函数来显示和隐藏透明的.png网格和图例。我还想使用此功能来显示/隐藏警卫塔。脚本工作得很好但是当我试图隐藏塔时，脚本只选择数据库中的第一个塔。

<script language="javascript" type="text/javascript">
function toggleLayer(whichLayer){
    if (document.getElementById) {
        var e = document.getElementById(whichLayer)
        e.style.display = e.style.display == "none" ? "block" : "none";
    }
}
</script>

然后我有一个按钮来调用该功能。

<form method="get" action="javascript:toggleLayer('tower');"><button class="botbuttprefs" type="submit">Show/Hide Towers</button></form>
ECHO "<div class='type' id='tower' style='top:",$GETy[$e]-2,"px; left:",$GETx[$e]-2,"px; width:4px; height:4px; z-index:2; background-color:black'></div>";

Answer 1

你问的问题并不完全清楚。

document.getElementById使用id值并且只返回一个元素，并且页面中只有一个具有给定id的项目。所以，如果你期望它以某种方式神奇地使用具有相同id的多个元素，那么它就不会。

要在页面中选择多个元素，有很多方法可以做到这一点，但最简单的方法是为每个元素提供一个公共类名。然后，您可以使用document.querySelectorAll(".myClass")，它将返回一个DOM节点列表，然后您可以迭代这些节点以对所有节点应用更改。

如果在该节点上没有设置显式样式，您可能还想知道读取element.style.display可能返回空字符串。由于默认条件或样式表规则，element.style.display不会返回可能有效的设置。如果您想要使实际值生效，则需要使用getComputedStyle()。

此外，没有理由使用它：

if (document.getElementById)

所有浏览器都有这种方法。

javascript使用style.display中的变量

1 个答案: