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