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