【JavaScript】如何切换元素显示与隐藏

总结一下，页面中切换显示元素的方法

一、js原生方式

方法一：使用document.createElement

在显示的方法中，通过document.createElement创建元素，销毁的方法中，移除元素

export const showDom = () => {
  const dom = document.createElement('div')
  dom.setAttribute('id', 'test')
  dom.innerHTML = 'test dom'
  document.body.appendChild(dom)
}

export const hideDom = () => {
  const dom = document.getElementById('test')
  if (dom) {
     document.body.removeChild(dom)
  }
  // dom?.remove()
}

hideDom方法中，既可使用父元素的removeChild()清除元素，也可使用自身的romove()方法

方法二：切换css的diaplay属性值

首先，要在页面需要的位置，先写好dom元素，

根据需要，添加默认隐藏的css值style="display: none"

<div id="test" style="display: none">test dom</div>

export const showDom = () => {
  const dom = document.getElementById('test')
  dom?.style.setProperty('display', 'flex')
}

export const hideDom = () => {
  const dom = document.getElementById('test')
  dom?.style.setProperty('display', 'none')
}

方法三：切换css的其他属性值

使用visibility或opacity，代码和方法二是一样的，但是也注意它们和diaplay属性的区别

diaplay：

// 显示元素
element.style.display = 'block'; // 或 'flex', 'grid' 等
// 隐藏元素
element.style.display = 'none';

visibility:

// 显示元素
element.style.visibility = 'visible';
// 隐藏元素（保留空间）
element.style.visibility = 'hidden';

opacity:

// 显示元素
element.style.opacity = '1';
// 隐藏元素（保留空间，可交互）
element.style.opacity = '0';
// 完全隐藏并不可交互
element.style.opacity = '0';
element.style.pointerEvents = 'none';

区别对比：

特性	display: none	visibility: hidden	opacity: 0
是否占据空间	否	是	是
是否可交互	否	否	是
是否影响布局	是（重排）	否（重绘）	否（重绘）

*注：opacity: 0 的元素默认仍可交互，除非额外设置 pointer-events: none