生活随笔
收集整理的這篇文章主要介紹了
js visibility和display区别（附代码实例）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<html><head><meta charset="utf-8" /><title></title><script type="text/javascript">//元素的隱藏與顯示//visibility屬性是隱藏元素但保持元素的浮動(dòng)位置，而display實(shí)際上是設(shè)置元素的浮動(dòng)特征。//PS：當(dāng)元素被隱藏之后，就不能再接收到其它事件了//使用visibility屬性設(shè)置的隱藏，元素的位置還在。//當(dāng)visibility被設(shè)置為"hidden"的時(shí)候，元素雖然被隱藏了，但它仍然占據(jù)它原來所在的位置。function visibilityHidden() {document.getElementById("d1").style.visibility = "hidden";}function visibilityVisible() {document.getElementById("d1").style.visibility = "visible";}//使用display屬性設(shè)置隱藏，位置會(huì)挪動(dòng)。//【1】none設(shè)置后，元素被隱藏，原來所在位置也不再占用。//【2】當(dāng)display被設(shè)置為block(塊)時(shí)，容器中所有的元素將會(huì)被當(dāng)作一個(gè)單獨(dú)的塊，就像<div>元素一樣，它會(huì)在那個(gè)點(diǎn)被放入到頁(yè)面中。//(實(shí)際上你可以設(shè)置<span>的display:block，使其可以像<div>一樣工作。//【3】將display設(shè)置為inline，將使其行為和元素inline一樣，即使它是普通的塊元素如<div>，它也將會(huì)被組合成像<span>那樣的輸出流。function displayNone() {document.getElementById("d2").style.display = "none";}function displayBlock() {document.getElementById("d2").style.display = "block";}function displayInline() {document.getElementById("d2").style.display = "inline";}</script></head><body><h1>visibility</h1><div id="d1" οnclick="alert('Div 1 onclick');">Div 1</div><br /><button type="button" οnclick="visibilityHidden()">hidden</button><button type="button" οnclick="visibilityVisible()">visible</button><br /><br /><hr /><h1>display</h1><div id="d2" οnclick="alert('Div 2 onclick');">Div 2</div><br /><button type="button" οnclick="displayNone()">none</button><button type="button" οnclick="displayBlock()">block</button><button type="button" οnclick="displayInline()">inline</button></body>
</html>
總結(jié)
以上是生活随笔為你收集整理的js visibility和display区别（附代码实例）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
