HTML頁面內的每個元素都可以通過JavaScript來訪問
DHTML的樣式屬性包含有可視性屬性
後者能夠讓你控制是否在頁面上顯示元素的內容
要做到這一點
你就要把屬性設置為可視或者隱藏
下面的句法能夠讓用戶通過JavaScript來訪問這個屬性
document
element_name
style
visibility =
visible
或者
document
element_name
style
visibility =
hidden
;
真正的元素通過使用其ID屬性和JavaScript的getElementById方法就能夠輕易被找到
document
getElementById(
element name
)
style
visibility =
hidden
;
要記住
HTML元素都被分配了ID屬性
用來在頁面裡區分它們
這就允許DHTML和JavaScript能夠定位並使用各個獨立的元素
下面的HTML示例將不同的名稱分配給了HTML標題（header）的元素
並使用JavaScript來顯示和隱藏第二個標題
<html>
<head>
<title>div test</title>
</head>
<body>
<h
id=
header
onMouseOver=
document
getElementById(
header
)
style
visibility=
hidden
;
onMouseOut=
document
getElementById(
header
)
style
visibility =
visible
;
>
Now you see it!
</h
>
<h
id=
header
>
Now you don
t!
</h
>
</body>
</html>
這段代碼使用了第一個標題元素的onMouseOver和onMouseOut事件
用來顯示和隱藏第二個標題元素
要注意
通過ID屬性分配給第二個標題的名稱
是用來控制其在JavaScript裡可視程度的
在一次只需要顯示文檔的一部分的時候
顯示和隱藏元素的方法是好處頗多的
它可以用於菜單
擴展／壓縮頁面的區域
以及其他等等
你可以對任何HTML的元素使用這個技巧
但是在處理頁面大塊區域的時候
DIV元素將是它的一個主要競爭對手
什麼是DIV？ DIV元素是用來為HTML文檔內大塊（block
level）的內容提供結構和背景的元素
DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的
其中所包含元素的特性由DIV標簽的屬性來控制
或者是通過使用樣式表格式化這個塊來進行控制
Internet Explorer和Netscape的浏覽器都支持DIV標簽
DIV和SPAN 很多開發人員都把DIV元素同SPAN元素弄混淆了
盡管它們在特性上相同
但是SPAN是用來定義內嵌內容而不是大塊內容的
你可以對段落使用DIV標簽
但是SPAN對於為段落內的一個或者多個字賦予特殊的特性很有用
DIV標簽允許你分割一個Web頁面
以此來進行格式化和演示
可以將它和可視性的技巧組合起來使用
用以分割頁面的內容
並顯示你所選擇的內容
下面這段示例代碼使用了DIV標簽將該頁面分割成了多個區域
超鏈接會顯示和隱藏這些區域
<html><head>
<title>div test</title>
<script language=
JavaScript
>
function setAllVisible() {
document
getElementById(
section
)
style
visibility=
hidden
;
document
getElementById(
section
)
style
visibility=
hidden
;
document
getElementById(
section
)
style
visibility=
hidden
;
document
getElementById(
section
)
style
visibility=
hidden
;
}
</script></head>
<body onLoad=
setAllVisible();
>
<h
> Sample</h
>
<ul>
<li><a #
onClick=
document
getElementById(
section
)
style
visibility=
visible
;
document
getElementById(
section
)
style
visibility=
hidden
;
document
getElementById(
section
)
style
visibility=
hidden
;
document
getElementById(
section
)
style
visibility=
hidden
;
>Section
</a></li>
<li><a #
onClick=
document
getElementById(
section
)
style
visibility=
hidden
;
document
getElementById(
section
)
style
visibility=
visible
;
document
getElementById(
section
)
style
visibility=
hidden
;
document
getElementById(
section
)
style
visibility=
hidden
;
>Section
</a></li>
<li><a #
onClick=
document
getElementById(
section
)
style
visibility=
hidden
;
document
getElementById(
section
)
style
visibility=
hidden
;
document
getElementById(
section
)
style
visibility=
visible
;
document
getElementById(
section
)
style
visibility=
hidden
;
>Section
</a></li>
<li><a #
onClick=
document
getElementById(
section
)
style
visibility=
hidden
;
document
getElementById(
section
)
style
visibility=
hidden
;
document
getElementById(
section
)
style
visibility=
hidden
;
document
getElementById(
section
)
style
visibility=
visible
;
>Section
</a></li>
</ul><br>
<div id=
section
>Section
text
</div>
<div id=
section
>Section
text
</div>
<div id=
section
>Section
text
</div>
<div id=
section
>Section
text
</body>
</html>
這段代碼包括了一個用來隱藏所有DIV元素的JavaScript函數
當文檔被加載的時候
這個函數就被調用了
點擊每個超鏈接將會顯示相關的區域並隱藏其他的區域
這種方式的一個弱點是
只有Internet Explorer
或者更高版本的浏覽器以及Netscape Navigator
或者更高版本的浏覽器才支持這些方法
但是
我使用Mozilla
測試過
沒有問題
只在必要的時候才顯示信息 將DHTML和JavaScript的強大能力組合起來使用
就能夠讓你預加載頁面的內容
並在適當的時候顯示其各個部分
這樣就可以提高響應時間
因此能夠為用戶提供更高的性能
From:http://tw.wingwit.com/Article/program/Java/Javascript/201311/8550.html
