Skip to content

使用JavaScript显示或隐藏HTML元素

JavaScript允许您通过访问其style属性来更改元素的CSS属性。通过这种方式，您可以通过更改元素的display属性来显示或隐藏HTML元素。

将这种技术与扩展运算符（...）和Array.prototype.forEach()结合使用，可以同时显示或隐藏多个元素。

隐藏HTML元素

要隐藏HTML元素，您可以使用display: none CSS属性。这将从页面布局中删除该元素，但它仍然存在于DOM中。

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));

hide(...document.querySelectorAll('img'));
// 隐藏页面上的所有<img>元素

显示HTML元素

大多数HTML元素都有默认的display属性值。例如，<div>元素的默认值是block，而<span>元素的默认值是inline。要显示一个元素，您可以将其display属性设置为其默认值，或者设置为空字符串（''）。

const show = (...el) => [...el].forEach(e => (e.style.display = ''));

显示(...document.querySelectorAll('img'));
// 显示页面上的所有<img>元素