• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

1，通过设置display：none

2，input设置type为hidden

3，通过设置层级z-index使其处于某个div下层来实现隐藏效果

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;

}

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。