快捷導(dǎo)航

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ù)原來的位置。

看例子即可明白：

復(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 固定懸浮效果實(shí)現(xiàn)思路代碼
懸浮效果想必大家都不陌生吧，本文為大家介紹下使用js固定懸浮的實(shí)現(xiàn)思路及代碼，感興趣的朋友可以參考下
2013-08-08
js實(shí)現(xiàn)嵌套數(shù)組重排序
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)嵌套數(shù)組重排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
js將table的每個td的內(nèi)容自動賦值給其title屬性的方法
下面小編就為大家?guī)硪黄猨s將table的每個td的內(nèi)容自動賦值給其title屬性的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-10-10
jsvascript圖像處理—(計(jì)算機(jī)視覺應(yīng)用)圖像金字塔
上一篇文章，我們講解了邊緣梯度計(jì)算函數(shù)，這篇文章我們來了解圖像金字塔;圖像金字塔被廣泛用于計(jì)算機(jī)視覺應(yīng)用中;圖像金字塔是一個圖像集合，集合中所有的圖像都源于同一個原始圖像，而且是通過對原始圖像連續(xù)降采樣獲得的
2013-01-01
原生js編寫2048小游戲
本文主要介紹了用原生js編寫2048小游戲的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧
2017-03-03
Firefox下無法正常顯示年份的解決方法
在用Firefox上一些網(wǎng)站會看到這樣的顯示108年1月26日，而IE顯示為2008年1月26日原因是javascrīpt的兼容性問題
2014-09-09
JavaScript詳解類數(shù)組與可迭代對象的實(shí)現(xiàn)原理
這篇文章主要介紹了JavaScript詳解類數(shù)組與可迭代對象的實(shí)現(xiàn)原理，ES6中引入了迭代器與可迭代對象的概念，并且提供了對可迭代對象的相關(guān)支持，如for...of循環(huán)，Map(iterable)構(gòu)造器，展開語法...等。讓我們對數(shù)組外的數(shù)據(jù)集合的遍歷操作也得到極大簡化
2022-06-06
微信小程序?qū)崿F(xiàn)人臉檢測功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)人臉檢測功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-05-05
JS實(shí)現(xiàn)獲取剪貼板內(nèi)容的方法
這篇文章主要介紹了JS實(shí)現(xiàn)獲取剪貼板內(nèi)容的方法,涉及javascript基于clipboardData操作剪貼板的相關(guān)技巧,需要的朋友可以參考下
2016-06-06
簡單純js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽實(shí)例
選項(xiàng)卡效果代碼，無jq,JS來實(shí)現(xiàn)，灰色風(fēng)格，沒有怎么美化，或許看上去比較普通，不過兼容性和操作起來挺舒服的，風(fēng)格適用于大部分的網(wǎng)站，或許你會用得上。
2015-08-08