JavaScript切换元素显示隐藏的方法

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

一、js原生方式

方法一:使用document.createElement

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

js 复制代码
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"

html 复制代码
<div id="test" style="display: none">test dom</div>
js 复制代码
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的其他属性值

使用visibilityopacity,代码和方法二是一样的,但是也注意它们和diaplay属性的区别

diaplay:

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

visibility:

js 复制代码
// 显示元素
element.style.visibility = 'visible';
// 隐藏元素(保留空间)
element.style.visibility = 'hidden';

opacity:

js 复制代码
// 显示元素
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

相关推荐
艾小码11 分钟前
AI时代,编程简化:前端开发的范式革命
前端
讨厌吃蛋黄酥12 分钟前
🔥 揭秘React魔法:从JSX到表单组件的性能与交互之争!
前端·javascript·react.js
沫小北12 分钟前
HarmonyOS Lottie动画库总结
前端·harmonyos
Oriel14 分钟前
在 Strapi v4 中生成专业 API 文档
前端·后端
WildBlue15 分钟前
解锁 Babel - JSX 编译:前端魔法背后的秘密🥳
前端·react.js
南方kenny15 分钟前
React 魔法揭秘:useRef 与 forwardRef 的奇妙之旅
前端·javascript·react.js
LaoZhangAI16 分钟前
Playwright MCP完整指南:AI驱动的浏览器自动化测试革命2025
前端·后端
前端Hardy18 分钟前
Python 打造 Excel 到 JSON 转换工具:从开发到打包全攻略
前端·后端·python
guiyanakaung18 分钟前
CMP 如何优雅的实现跨软件的拖拽功能
前端·github
海上生明月丿22 分钟前
Vue 工程化
前端·javascript·vue.js