如何使用 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中文网其他相关文章！