Vanilla JavaScript Set Display

在 Web 开发中，使用 JavaScript 操作 HTML 元素样式是非常常见的需求。其中一个常见的样式是 display 属性，它控制元素的可见性，例如隐藏或显示一个元素。本文将介绍在 Vanilla JavaScript 中如何使用 display 属性来控制元素的可见性。

基础概念

在 HTML 中，每个元素都有默认的 display 属性值，该值控制元素在页面上的显示方式。常见的几个 display 属性值如下：

• block: 元素呈块级显示，占用一行或多行空白区域，高度和宽度可以设置，相邻元素会自动换行。
• inline: 元素呈行内显示，不占用一行或多行空白区域，高度和宽度无法设置，相邻元素会自动连续显示。
• inline-block: 组合了 block 和 inline 的特点，元素呈行内显示但是可以设置高度和宽度。
• none: 元素不显示。

通过改变元素的 display 属性值，我们可以控制元素的可见性和显示方式。

操作元素的 display 属性

在 Vanilla JavaScript 中，我们可以使用 style.display 属性来设置元素的 display 属性值。例如，我们想将一个元素隐藏起来，可以这样写代码：

const elem = document.getElementById('my-elem');
elem.style.display = 'none';

以上代码会将 id 为 my-elem 的元素隐藏起来，等价于 CSS 中的 display: none; 样式。

要显示这个元素，我们可以这样写代码：

elem.style.display = 'block';

以上代码会将元素重新设置为块级元素，等价于 CSS 中的 display: block; 样式。

类似地，我们可以将元素的 display 属性值设置为 inline 或者 inline-block，具体方法与上述操作相似。

灵活应用

在实际开发中，我们可能需要根据用户行为或者其他动态情况来控制元素的显示和隐藏。使用 JavaScript 操作元素的 display 属性是非常灵活和方便的，可以根据具体的需求来写出相应的代码。

例如，下面的代码演示了如何通过点击按钮来隐藏和显示一个元素：

<button id="toggle-btn">点击我</button>
<div id="toggle-elem">我是要被隐藏和显示的元素</div>

<script>
  const toggleBtn = document.getElementById('toggle-btn');
  const toggleElem = document.getElementById('toggle-elem');

  toggleBtn.addEventListener('click', function() {
    if (toggleElem.style.display === 'none') {
      toggleElem.style.display = 'block';
    } else {
      toggleElem.style.display = 'none';
    }
  });
</script>

以上代码中，我们监听了按钮的点击事件，在点击时判断 toggle-elem 元素当前的 display 属性值是否为 none，如果是，则设置为 block，实现显示元素的效果；如果不是，则设置为 none，实现隐藏元素的效果。通过这种方式，我们可以轻松地实现隐藏、显示和切换元素的效果，满足不同的业务需求。

总结

使用 Vanilla JavaScript 操作 HTML 元素的 display 属性，可以灵活控制元素的可见性和显示方式。在实际开发中，我们可以根据具体的需求写出相应的代码，实现动态交互和良好的用户体验。