JavaScript 隐藏 div

本篇文章给出了三种不同的方法来使用 JavaScript 隐藏一个 div 元素。这些方法使用了不同的技术和 API 以适应各种情况和需求。

方法一：通过修改 style.cssText

JavaScript 可以直接访问 DOM 元素的 style 属性，并修改其中的 CSS 样式。我们可以使用该方法来修改一个 div 元素的 display 属性为 none，以此隐藏它。

const div = document.querySelector('#my-div');
div.style.cssText = 'display:none;';

需要注意的是，“方法一”只适用于内联 CSS，如果 div 元素样式通过外部或内嵌样式表设置，该方法将不会生效。

方法二：通过修改 class

我们可以创建一个 CSS 类，用于隐藏一个 div 元素，并使用 JavaScript 的 classList 属性来将该类应用到该元素，以此隐藏它。

.hide {
  display: none;
}

const div = document.querySelector('#my-div');
div.classList.add('hide');

如果需要再次显示该元素，我们可以使用 classList.remove() 方法来移除该 class。

div.classList.remove('hide');

方法三：通过设置属性

通过使用 JavaScript 直接设置元素的 HTML 属性，我们可以将 div 元素的 style 属性的 display 属性设置为 none，以时隐藏它。

const div = document.querySelector('#my-div');
div.setAttribute('style', 'display:none;');

需要注意的是，该方法将覆盖掉 div 元素之前应用的所有样式。如果需要恢复元素之前应用的样式，我们需要手动保存并重新应用这些样式。

以上三个方法均可以使用来隐藏 div 元素。具体的选择取决于项目需求和技术环境。