[分享]css元素隐藏后在显示

CSS 元素隐藏后在显示是开发过程中一个比较常用的技巧。这种技巧可以让我们在不删除元素的情况下，通过 CSS 设置元素的可见性，控制元素在页面上的显示和隐藏。下面是一个使用 CSS 元素隐藏后在显示的...

CSS 元素隐藏后在显示是开发过程中一个比较常用的技巧。这种技巧可以让我们在不删除元素的情况下，通过 CSS 设置元素的可见性，控制元素在页面上的显示和隐藏。下面是一个使用 CSS 元素隐藏后在显示的例子：

/* CSS 代码 */
.hidden {
  display: none;
}

/* JavaScript 代码 */
document.getElementById("myElement").classList.remove("hidden"); 

在这个例子中，我们先定义了一个名为 .hidden 的 CSS 类，该类设置了元素的 display 属性为 none，使得该元素在页面上不可见。在需要显示元素时，我们可以使用 JavaScript 的 classList.remove() 方法来移除该元素的 .hidden 类，使得元素重新显示在页面上。

除了通过 CSS 类来设置元素的可见性，我们也可以直接使用元素的 style 属性来控制元素的显示和隐藏：

/* JavaScript 代码 */
var myElement = document.getElementById("myElement");
myElement.style.display = "none";

/* 在需要显示元素时 */
myElement.style.display = ""; 

在这个例子中，我们使用了元素的 style.display 属性来控制元素的可见性。当需要显示元素时，我们将该属性设置为空字符串，使得元素重新显示在页面上。

总的来说，CSS 元素隐藏后在显示是一种非常常用的技巧，它可以让我们在不删除元素的情况下，通过控制元素的可见性，实现更加灵活的页面效果。