如何使用 JavaScript 顯示和隱藏 DIV 元素？

使用 JavaScript 顯示/隱藏「div」

建立網站時，通常需要切換元素的可見性。這可以使用 JavaScript 來實現。但是，如果您的程式碼遇到問題，請考慮以下潛在的解決方案：

操作「顯示」屬性

要顯示或隱藏元素，請設定將樣式屬性“display”設定為所所需的值：

// Hide an element
element.style.display = 'none';

// Show an element
element.style.display = 'block';

操縱「可見性」屬性

如果您希望元素在隱藏時仍佔據空間，請調整「可見性」屬性：

// Hide an element
element.style.visibility = 'hidden';

// Show an element
element.style.visibility = 'visible';

處理元素集合

要隱藏多個元素，請迭代並將每個元素的「顯示」設為'none':

function hide(elements) {
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = 'none';
  }
}

將修正應用到您的程式碼

在您的程式碼中，第二個函數不起作用，因為它試圖用div1 取代div2內容。要顯示div2，請將第二個函數中的這一行：

document.getElementById('replace_target').innerHTML = document.getElementById('source').innerHTML;

替換為：

document.getElementById('replace_target').innerHTML = document.getElementById('target').innerHTML;

透過調整這些屬性並應用這些技術，您現在應該能夠切換根據需要顯示您的div 的可見性。

以上是如何使用 JavaScript 顯示和隱藏 DIV 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！