css隐藏元素的几种方法
css隐藏元素的几种方法?
css隐藏元素是网页编写常用的方式,根据我的经验总结了以下几种css隐藏元素的方法.
opacity
opacity属性的隐藏方法主要是将元素透明度opacity设置为0,从而在视觉上就隐藏了元素,但是元素本身依然占据的着原有空间。
浏览器支持来说 IE8以以及更早的版本需要使用filter属性代替,如: filter: Alpha(opacity=80)。
语法: opacity: value|inherit
value: 透明值。可取值有 0.0 (全透明)和 1.0(不透明)。
inherit:从父元素集成opacity属性的值。
其规定使用的CSS版本为 CSS3
JavaScript上的opacity使用方法: object.style.opacity=80。
使用示例:
.hide {
opacity: 0
}
display
display属性的隐藏方法主要是将元素display值设置为none,将其不可见,连盒子模型也不生成,甚至连也不占用原有空间,使用该属性为none时用户对该元素的操作将不可用。
其规定使用的CSS版本为 CSS1。
JavaScript上的display隐藏时方法: object.style.display="none"。
JavaScript上的display显示时方法: object.style.display="除none的其他值"
display的属性值包含有: "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
使用示例:
.hide {
display: none
}
如果使用jQuery对 带有display: none的元素进行显示/隐藏使用: $(.element).show() / $(element).hide()
position
position属性的隐藏方法主要是将元素定位出可视区域,从而达到隐藏效果。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
该属性的值包含有: absolute,fixed,releative,static,inherit。
其规定使用的CSS版本为 CSS2。
JavaScript上的absolute隐藏时方法: object.style.position="absolute" ,object.style.top="-99999px",object.style.left="-99999px"。
使用示例:
.hide {
position: absolute
top: -99999px
left: -99999px
}
visibility
visibility属性的隐藏方法主要是在使用动画效果时使用,将该值设置为 hidden将隐藏元素及其子孙元素,如,我们需要鼠标移动到元素后显示子元素,可在元素 的hover样式设置 元素(或其子孙元素)的visibility的值 为visible即可。
该属性的值包含有:visible,hidden,collapse,inherit。
其规定使用的CSS版本为 CSS2。
JavaScript上的absolute隐藏时方法: object.style.visibility="hidden"。
使用示例:
.hide {
visibility: hidden
}
.show
{visibility: visible
}
overflow
overflow属性的隐藏方法主要是, 使用超出隐藏的方法。
使用示例:
.overflow
{overflow: hidden
}
1,通过设置display:none
2,input设置type为hidden
3,通过设置层级z-index 使其处于某个div下层来实现隐藏效果
1、overflow:hidden 这是防止溢出,也是一种隐藏,只不过是把超出范围的元素隐藏,这种一般用于文字过多或者图片特效以及自适应中div没法设置高度时使用
2、display:none这就是完全的隐藏了,直接消失,任何对该元素直接的用户交互操作都不可能生效,被隐藏的元素完全不会占用空间,仿佛元素完全不存在一样。
3、利用opacity透明度来隐藏,opacity设置为0,它只是一种视觉隐藏,元素本身依旧占用它的位置并对网页的布局起到作用,它也同样影响用户交互。在读屏软件中会被识别。
4、position:元素的定位。把position:absolutely;top:-4555px;left:-45545px;top和left设置成足够大的负数,相当于把元素放到可视区域外,它不会影响布局,能够让元素保持可操作性,在读屏软件上可以被识别。
5、visibility:规定元素 是否可见,一般设置为hidden,它可以很好的隐藏,不会影响用户的交互,在读屏软件中不会被识别。
display和visibility,前者是存在元素可以不占用空间。后者隐藏是占位的。前者可以设为none,后者设为hidden。