display和visibility的區(qū)別示例介紹
更新時(shí)間:2014年02月26日 16:09:36 作者:
這篇文章主要介紹了display和visibility的區(qū)別,需要的朋友可以參考下
display通常可以設(shè)置為none、inline、block
visibility通常可以設(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通常可以設(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將table的每個(gè)td的內(nèi)容自動(dòng)賦值給其title屬性的方法
下面小編就為大家?guī)?lái)一篇js將table的每個(gè)td的內(nèi)容自動(dòng)賦值給其title屬性的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10jsvascript圖像處理—(計(jì)算機(jī)視覺(jué)應(yīng)用)圖像金字塔
上一篇文章,我們講解了邊緣梯度計(jì)算函數(shù),這篇文章我們來(lái)了解圖像金字塔;圖像金字塔被廣泛用于計(jì)算機(jī)視覺(jué)應(yīng)用中;圖像金字塔是一個(gè)圖像集合,集合中所有的圖像都源于同一個(gè)原始圖像,而且是通過(guò)對(duì)原始圖像連續(xù)降采樣獲得的2013-01-01JavaScript詳解類(lèi)數(shù)組與可迭代對(duì)象的實(shí)現(xiàn)原理
這篇文章主要介紹了JavaScript詳解類(lèi)數(shù)組與可迭代對(duì)象的實(shí)現(xiàn)原理,ES6中引入了迭代器與可迭代對(duì)象的概念,并且提供了對(duì)可迭代對(duì)象的相關(guān)支持,如for...of循環(huán),Map(iterable)構(gòu)造器,展開(kāi)語(yǔ)法...等。讓我們對(duì)數(shù)組外的數(shù)據(jù)集合的遍歷操作也得到極大簡(jiǎn)化2022-06-06JS實(shí)現(xiàn)獲取剪貼板內(nèi)容的方法
這篇文章主要介紹了JS實(shí)現(xiàn)獲取剪貼板內(nèi)容的方法,涉及javascript基于clipboardData操作剪貼板的相關(guān)技巧,需要的朋友可以參考下2016-06-06簡(jiǎn)單純js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽實(shí)例
選項(xiàng)卡效果代碼,無(wú)jq,JS來(lái)實(shí)現(xiàn),灰色風(fēng)格,沒(méi)有怎么美化,或許看上去比較普通,不過(guò)兼容性和操作起來(lái)挺舒服的,風(fēng)格適用于大部分的網(wǎng)站,或許你會(huì)用得上。2015-08-08