關(guān)于CSS屬性中visibility隱藏和display消失的區(qū)別簡析

2024-07-11 08:29:26

字體：大中小

供稿：網(wǎng)友

了解Css的人應(yīng)該都知道display:none;和visibility:hidden;之間的一些區(qū)別，當(dāng)html元素被設(shè)置為display:none;后，瀏覽器不會解析該元素，“none”就是沒有，消失了，所以他不會再文檔流中占位。而visibility:hidden;僅僅是視覺上消失了，“hidden”也就是隱藏了，但是它所在的位置仍然還在，就像你把你個文件給隱藏了，但是這個文件在你的硬盤中仍然是占據(jù)一定空間的，只是你看不見而已。
對使用display:none;的元素，瀏覽器不會去解析，搜索引擎可能會認為被隱藏的文字屬于垃圾信息而被忽略，而且屏幕閱讀器（是為視覺上有障礙的人設(shè)計的讀取屏幕內(nèi)容的程序）會忽略被隱藏的文字。
而對使用visibility:hidden;的元素，雖然隱藏了，但位置仍在，給人的感覺是“占著茅坑布拉斯”，要配合position:relative和position:absolute一起來用，沒有display:none;那么簡單、靈活。就另外一點，visibility:hidden;轉(zhuǎn)換為visibility:visible跟display:none;轉(zhuǎn)換為display:block;性能要好，因為display在切換可見性時會產(chǎn)生reflow，它要重新構(gòu)建frame，當(dāng)然要比visibility:visible慢。
如果你以上兩種方法都不想要的話，可以寫一個類：

復(fù)制代碼

代碼如下:
.hidden{
overflow: hidden;
width: 0;
height: 0;
border:none;
}

就是采用overflow隱藏，然后把元素的基本屬性值設(shè)置為最小或無，當(dāng)然，如果你要顯示的話，還得寫另一個相應(yīng)的類。
CSS中的visibility和display兩個屬性很容易被混淆，因為它們看起來是做同樣的事情，但實際上，這兩個屬性是完全不同的。 visibility屬性用來設(shè)置一個給定的元素是否顯示（visibility="visible|hidden"），但是，雖然一個元素的visibility被設(shè)置為hidden，但是該元素仍然會占據(jù)設(shè)計的位置：

復(fù)制代碼

代碼如下:
<script language="JavaScript">
function toggleVisibility(me)...{
if (me.style.visibility=="hidden")...{
me.style.visibility="visible";
}
else ...{
me.style.visibility="hidden";
}
}
</script>

<div onclick="toggleVisibility(this)" style="position:relative">
This example displays text that toggles between a visibility of 'visible' and 'hidden'.
Note the behavior of the next line.</div><div>This second line shouldn't
move, since visibility retains its position in the flow</div>

復(fù)制代碼

代碼如下:
<script language="JavaScript">
function toggleVisibility(me){
if (me.style.visibility=="hidden"){
me.style.visibility="visible";
}
else{
me.style.visibility="hidden";
}
}
</script>

上一篇：用hover配合(純css)position實現(xiàn)網(wǎng)頁動態(tài)展示效果

下一篇：怎么用純CSS制作帶小三角的tooltip提示框

發(fā)表評論

共有條評論