隐藏页面的元素的方式

简介: 隐藏页面的元素的方式

五种方式:

display:none 【将元素完全隐藏,不会占据页面空间】

visibility:hidden 【将元素隐藏,但仍会占据页面空间】

opacity:0 【将元素透明度设置为0,仍占据页面空间】

position:absolute或者fixed,left/top设置为足够远的负值或者像素值

transform:scal(0) 【将元素缩放到0大小,仍然占据页面空间】

display:none 【将元素完全隐藏,不会占据页面空间】

.element {
  display: none;
}

visibility:hidden 【将元素隐藏,但仍会占据页面空间】

.element {
  visibility: hidden;
}

opacity:0 【将元素透明度设置为0,仍占据页面空间】

.element {
  opacity: 0;
}

position:absolute或者fixed,left/top设置为足够远的负值或者像素值

.element {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

transform:scal(0) 【将元素缩放到0大小,仍然占据页面空间】

.element {
  transform: scale(0);
}


相关文章
|
9月前
|
前端开发 JavaScript
几种常见的获取页面元素数据的方法
几种常见的获取页面元素数据的方法
67 0
|
9月前
|
前端开发
隐藏元素
隐藏元素。
45 1
|
9月前
|
前端开发 JavaScript 索引
改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
80 2
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
85 0
|
9月前
|
JavaScript
【sgDrag】自定义组件:基于Vue开发支持批量声明拖拽元素、被碰撞元素,拖拽全过程监听元素碰撞检测并返回拖拽原始元素、克隆元素及其getBoundingClientRect对象和碰撞接触元素数组。
【sgDrag】自定义组件:基于Vue开发支持批量声明拖拽元素、被碰撞元素,拖拽全过程监听元素碰撞检测并返回拖拽原始元素、克隆元素及其getBoundingClientRect对象和碰撞接触元素数组。
几种隐藏元素的方法
几种隐藏元素的方法
44 0
|
JavaScript 前端开发
jquery控制元素的隐藏和显示的几种方法
jquery控制元素的隐藏和显示的几种方法
603 0
|
JavaScript
Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现
Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现
408 0
|
安全 Java 数据库
页面控制菜单的显示或隐藏|学习笔记
快速学习页面控制菜单的显示或隐藏
页面控制菜单的显示或隐藏|学习笔记
Element-ui表格的列隐藏显示会使表格头数据错乱或者表格头样式变大
Element-ui表格的列隐藏显示会使表格头数据错乱或者表格头样式变大
496 0

热门文章

最新文章