CSS控制显示与隐藏的巧妙运用

2024-02-14 08:24:51

从头学前端-34：CSS控制显示与隐藏的巧妙运用

从display属性的none属性值说起

display属性决定一个HTML元素是否显示。none值代表元素将不会在页面中显示。其典型用法包括：

隐藏页面上的元素：

.hide {
  display: none;
}

动态控制元素的显示与隐藏：

const element = document.getElementById('element');

element.style.display = 'none';
element.style.display = 'block';

深入理解visibility属性

visibility属性允许您控制元素是否在屏幕上可见。hidden属性值使其不可见，而visible属性值则使其可见。

与display属性不同，visibility属性只会隐藏元素，但仍然保留元素在页面中的位置。

以下是一些常见的用例：

隐藏元素而不改变其布局：

.invisible {
  visibility: hidden;
}

渐进显示元素：

const element = document.getElementById('element');

element.style.visibility = 'hidden';
setTimeout(() => {
  element.style.visibility = 'visible';
}, 1000);

display与visibility的区别

为了更好地理解这两个属性的区别，我们来看两个例子：

display: none; ：

<div id="box">Hello</div>

#box {
  display: none;
}

在这种情况下，元素会被隐藏，并且在页面中不占任何空间。

visibility: hidden; ：

<div id="box">Hello</div>

#box {
  visibility: hidden;
}

在这种情况下，元素会被隐藏，但它仍然保留在页面中的位置。如果元素周围有其他元素，这些元素将不会因为元素隐藏而改变位置。

应用场景

切换元素的显示与隐藏：

const element = document.getElementById('element');

element.addEventListener('click', () => {
  if (element.style.display === 'none') {
    element.style.display = 'block';
  } else {
    element.style.display = 'none';
  }
});

根据条件显示或隐藏元素：

const element = document.getElementById('element');

if (condition) {
  element.style.display = 'block';
} else {
  element.style.display = 'none';
}

创建弹出窗口：

<div id="modal">
  <div class="modal-content">
    <h1>Modal Title</h1>
    <p>Modal Content</p>
  </div>
</div>

#modal {
  display: none;
}

.modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

const modal = document.getElementById('modal');

const openModal = () => {
  modal.style.display = 'block';
};

const closeModal = () => {
  modal.style.display = 'none';
};