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

相关推荐
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi9878381 小时前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉3 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽3 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课3 小时前
React useEffect 详解与运用
前端·react.js
我想说一句3 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1233 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为