javascript在style.display中使用變量

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()實際值生效，則需要使用getComputedStyle() 。

---

另外，沒有理由使用此方法：

if (document.getElementById)

所有瀏覽器都具有該方法。