隐藏页面的元素的方式

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

五种方式:

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);
}


相关文章
|
7月前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
7月前
|
前端开发 JavaScript
几种常见的获取页面元素数据的方法
几种常见的获取页面元素数据的方法
58 0
|
5月前
|
JavaScript 前端开发
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
382 0
|
7月前
|
前端开发
隐藏元素
隐藏元素。
40 1
|
6月前
|
小程序 JavaScript 前端开发
微信小程序如何控制元素的显示和隐藏
微信小程序如何控制元素的显示和隐藏
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
77 0
|
7月前
|
JavaScript
【sgDrag】自定义组件:基于Vue开发支持批量声明拖拽元素、被碰撞元素,拖拽全过程监听元素碰撞检测并返回拖拽原始元素、克隆元素及其getBoundingClientRect对象和碰撞接触元素数组。
【sgDrag】自定义组件:基于Vue开发支持批量声明拖拽元素、被碰撞元素,拖拽全过程监听元素碰撞检测并返回拖拽原始元素、克隆元素及其getBoundingClientRect对象和碰撞接触元素数组。
|
JavaScript
checkbox选中和取消,控制dom元素颜色变化
checkbox选中和取消,控制dom元素颜色变化
64 0
几种隐藏元素的方法
几种隐藏元素的方法
35 0
|
JavaScript 前端开发
jquery控制元素的隐藏和显示的几种方法
jquery控制元素的隐藏和显示的几种方法
588 0