DIV CSS 佈局教程網
設為首頁
加入收藏
首頁
HTML基礎知識
CSS入門知識
JavaScript入門知識
DIV+CSS佈局
WEB網站前端
網頁腳本
網頁SEO優化
網頁制作工具
DIV+CSS佈局教程網
>>
網頁腳本
>>
JavaScript入門知識
>>
關於JavaScript
>> JS中style.display和style.visibility的區別實例說明
JS中style.display和style.visibility的區別實例說明
編輯：關於JavaScript
在JS中可以通過設置style.display或者style.visibility屬性來控制元素是否顯示，在style.display=block和style.visibility=visible的時候，元素被顯示，在style.display=none和style.visibility=hidden的時候，元素被隱藏。它們之間最大的區別是通過style.display=none隱藏的時候，元素不占據原來的位置，從文檔流中脫離，後續的元素填補其位置。通過style.visibility=hidden隱藏的時候，元素仍然占據原來的位置，只是被隱藏。
下面的例子說明了這種區別：在這個例子中，divContent1和divContent2隱藏的時候用的是style.display=none，這時候，後面的div會向上移動，占據已經隱藏的div的空間。divContent3和divContent4用的是style.visibility=hidden來隱藏，但是其隱藏後仍然占據原來的空間。
<html> <head> <title>test</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <style> .titlediv{background-color: #505050;color:white;font-weight:bold;padding:10px;cursor:pointer } .contentdiv{border:3px solid #505050;height:100px;padding:10px; } </style> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head> <body > click here(內容部分會隱藏，下面的內容會上來) this is some content to show and hide <p> </p> click here this is some content to show and hide <p> </p> click here(內容部分會隱藏，下面的內容不會上來) this is some content to show and hide <p> </p> click here this is some content to show and hide </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
上一頁:
js split函數用法總結(從入門到精通)
下一頁:
JavaScript中的style.display屬性操作
關於JavaScript
深入探究使JavaScript動畫流暢的一些方法
基於Javascript的動畫暗中同CSS過渡效果一樣，甚至更加快，這怎麼可能呢？而Adobe和Go
JS簡單隨機數生成方法
本文實例講述了JS簡單隨機數生成方法。分享給大家供大家參考，具體如下：<!doctype ht
JavaScript保存並運算頁面中數字類型變量的寫法
之前在html頁面嵌入一段如下javascript片段，但是在單擊一個按鈕的時候會對i值加一，但是兩
相關文章
js根據地理坐標確定地圖中心位置
使用js和jquery獲取url及url參數的方法
使用js實現極速選擇輸入城市名
JS鼠標懸浮圖片左右箭頭點擊訪問上下頁
js動態改變字體大小實例
js獲取和設置元素屬性值
js字符串轉數組
使用jquery.easysector.js繪制百分比餅圖
JS中script標簽defer和async屬性的區別詳解
很實用的js選項卡切換效果
JavaScript基礎知識
JSON基礎
正則表達式
關於JavaScript
JavaScript技巧
jQuery入門知識
AJAX入門
JavaScript綜合知識
小編推薦
javascript制作sql轉換為stringBuffer的小工具
UserData用法總結 lanyu出品
js獲取所有checkbox的值的簡單實例
JS Trim()
JavaScript獲取當前網頁標題（title）的方法
JS獲取及設置TextArea或input文本框選擇文本位置的方法
JS實現的網頁倒計時數字時鐘效果
JavaScript lodash常見用法系列小結
javascript給span標簽賦值的方法
jQuery 1.4：15個新特性和優化增強
熱門推薦
jQuery EasyUI datagrid在翻頁以後仍能記錄被選中行的實現代碼
TinyMCE提交AjaxForm獲取不到數據的解決方法
JS簡單實現多級Select聯動菜單效果代碼
最短的IE判斷代碼
JavaScript實現打字效果的方法
js數組依據下標刪除元素
js控制文本框只輸入數字和小數點的方法教程
JavaScript實戰(原生range和自定義特效)簡單實例
JS/jQuery實現默認顯示部分文字點擊按鈕顯示全部內容
大家都在看
掌握XML系列(2)--創建格式良好的XML文檔
很全面的JavaScript常用功能匯總集合
JS+CSS實現實用的單擊輸入框彈出選擇框的方法教程
JavaScript中指定函數名稱的相關方法
解析js原生方法創建表格效率測試
淺析用prototype定義自己的方法
使用jQuery實現input數值增量和減量的方法教程
10個美觀實用的jQuery和MooTool日歷插件
XML學習教程
|
jQuery入門知識
|
AJAX入門
|
Dreamweaver教程
|
Fireworks入門知識
|
SEO技巧
|
SEO優化集錦
|
Copyright ©
DIV+CSS佈局教程網
All Rights Reserved