display和visibility的區(qū)別示例介紹
更新時(shí)間：2014年02月26日 16:09:36 作者：
這篇文章主要介紹了display和visibility的區(qū)別,需要的朋友可以參考下
display通?？梢栽O(shè)置為none、inline、block
visibility通?？梢栽O(shè)置為hidden、visible
當(dāng)display為none，visibility為hidden時(shí)，元素都會(huì)不見(jiàn)。不過(guò)其還有不同之處。
display會(huì)將元素隱藏掉，并且位置不再被占據(jù)，而visibility則是占據(jù)原來(lái)的位置。
看例子即可明白：
<div id="myDiv" style="width:100px;border:1px solid #aaa;">
<p>
</p>
</div>
<input type="button" onclick="isVisibility(document.getElementById('myDiv'))" value="是否可見(jiàn)visibility" />
<input type="button" onclick="isDisplay(document.getElementById('myDiv'))" value="是否可見(jiàn)display" />
<script>
function isVisibility(me){
if (me.style.visibility=="hidden"){
me.style.visibility="visible"; }
else{
me.style.visibility="hidden";
}
}
function isDisplay(me){
if (me.style.display=="none"){
me.style.display="block"; }
else{
me.style.display="none";
}
}
</script>
visibility通?？梢栽O(shè)置為hidden、visible
當(dāng)display為none，visibility為hidden時(shí)，元素都會(huì)不見(jiàn)。不過(guò)其還有不同之處。
display會(huì)將元素隱藏掉，并且位置不再被占據(jù)，而visibility則是占據(jù)原來(lái)的位置。
看例子即可明白：
復(fù)制代碼 代碼如下:
<div id="myDiv" style="width:100px;border:1px solid #aaa;">
<p>
</p>
</div>
<input type="button" onclick="isVisibility(document.getElementById('myDiv'))" value="是否可見(jiàn)visibility" />
<input type="button" onclick="isDisplay(document.getElementById('myDiv'))" value="是否可見(jiàn)display" />
<script>
function isVisibility(me){
if (me.style.visibility=="hidden"){
me.style.visibility="visible"; }
else{
me.style.visibility="hidden";
}
}
function isDisplay(me){
if (me.style.display=="none"){
me.style.display="block"; }
else{
me.style.display="none";
}
}
</script>
相關(guān)文章
利用js正則表達(dá)式驗(yàn)證手機(jī)號(hào),email地址,郵政編碼
利用js正則表達(dá)式驗(yàn)證手機(jī)號(hào),email地址,郵政編碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要介紹了ES6字符串的擴(kuò)展實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
本文代碼使用 JavaScript。 一些同學(xué)對(duì)遞歸的理解還停留在“是一種求階乘比循環(huán)低效的方法”。但其實(shí)遞歸和循環(huán)處理的問(wèn)題是不同。拿“遍歷數(shù)組”這個(gè)問(wèn)題來(lái)說(shuō)：循環(huán)適合同一維度（單層長(zhǎng)度不限）上的遍歷，而遞歸則適合跨維度（層數(shù)不限）的遍歷。2013-02-02
Map與WeakMap類(lèi)型在JavaScript中的使用詳解
這篇文章主要介紹了Map與WeakMap類(lèi)型在JavaScript中的使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
一個(gè)簡(jiǎn)單的彈性返回頂部JS代碼實(shí)現(xiàn)介紹
頁(yè)面滾動(dòng)條處于低端,點(diǎn)擊回到頂部，并且隱藏掉，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下哈2013-06-06
鏈?zhǔn)秸{(diào)用就是調(diào)用對(duì)象的方法后返回到該對(duì)象，嚴(yán)格來(lái)講它并不屬于語(yǔ)法，而只是一種語(yǔ)法技巧，js令人著迷的一點(diǎn)就是這里。2010-02-02
Javascript 中的 call 和 apply使用介紹
JavaScript 中通過(guò)call或者apply用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法，將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象2012-02-02
JavaScript實(shí)現(xiàn)讀取條碼中的二進(jìn)制數(shù)據(jù)
條碼是一種以機(jī)器可讀的可視形式表示數(shù)據(jù)的方法,我們可以從條碼獲取二進(jìn)制數(shù)據(jù),并通過(guò)不同方法去讀碼,下面我們就來(lái)看看如何實(shí)現(xiàn)讀取條碼中的二進(jìn)制數(shù)據(jù)吧2024-03-03
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無(wú)縫輪播圖插件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
javascript中json基礎(chǔ)知識(shí)詳解
本文主要介紹了json的基礎(chǔ)知識(shí)。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01