隐藏页面的元素的方式

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

五种方式:

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


相关文章
|
6月前
|
前端开发 JavaScript
几种常见的获取页面元素数据的方法
几种常见的获取页面元素数据的方法
53 0
|
4月前
|
JavaScript 前端开发
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
352 0
|
6月前
|
前端开发
隐藏元素
隐藏元素。
33 1
|
6月前
|
前端开发 JavaScript 索引
改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
改变数组页面重新渲染的操作/那些操作不会重新渲染页面以及解决方法
47 2
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
74 0
|
6月前
|
JavaScript
【sgDrag】自定义组件:基于Vue开发支持批量声明拖拽元素、被碰撞元素,拖拽全过程监听元素碰撞检测并返回拖拽原始元素、克隆元素及其getBoundingClientRect对象和碰撞接触元素数组。
【sgDrag】自定义组件:基于Vue开发支持批量声明拖拽元素、被碰撞元素,拖拽全过程监听元素碰撞检测并返回拖拽原始元素、克隆元素及其getBoundingClientRect对象和碰撞接触元素数组。
几种隐藏元素的方法
几种隐藏元素的方法
29 0
|
JavaScript 前端开发
jquery控制元素的隐藏和显示的几种方法
jquery控制元素的隐藏和显示的几种方法
577 0
|
JavaScript
Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现
Vue 根据鼠标悬停目标元素上方显示、隐藏指定元素交互实现
393 0
javascrip 修改元素属性 - 切换图片
javascrip 修改元素属性 - 切换图片
75 0
javascrip 修改元素属性 - 切换图片