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