显示与隐藏

你可能会问你自己: "为什么 Netscape 要把显示叫做 'show'?"

回答是 Netscape 的 CSS 属性是以其特有的 LAYER 标签为基础的. 虽然 LAYER 受宠于 W3C 所推崇的 CSS-P, 但现在就连 Netscape 自己也不太重视它了. 所以显示属性中的 "show" 和相应的 "hide" 已被 Netscape 的层所抛弃了. 我相信这是 Netscape 表现 CSS-P 的唯一缺陷.

在统一的标准未建立之前, 你仍然需要分别编写代码以隐藏一个特殊的元素.

使用 Netscape

在 Netscape 中要使一个元素显示:

document.divName.visibility = "show"

若要将其隐藏则是:

document.divName.visibility = "hide"

使用 Internet Explorer

在 Internet Explorer 中显示一个元素则需:

divName.style.visibility = "visible"

若要将其隐藏则是:

divName.style.visibility = "hidden"

通常的显示与隐藏功能

为了避免重复书写相同的代码来显示和隐藏一些元素, 你可以使用以下功能:

function showObject(obj) {
	if (ns4) obj.visibility = "show"
	else if (ie4) obj.visibility = "visible"
}

function hideObject(obj) {
	if (ns4) obj.visibility = "hide"
	else if (ie4) obj.visibility = "hidden"
}

这些功能必须使用指针变量 -- 看看下面这个例子的代码.

如果你想改变一个元素的显示方式, 你只需写:

showObject(objectName)

hideObject(objectName)

在这里objectName即是一个特别的 DIV 标签的指针变量.

点击这里来看看使用这些功能的例子.

没有指针变量的显示/隐藏功能

我一直认为如果仅仅为了显示和隐藏而设定许多层, 这并非总是必须的, 有时甚至是很麻烦的. 我之所以首先提出指针变量技术是因为我将在后面的课程里以其为基础概念创作许多功能强大的 JavaScripts. 但在你并不需要许多的功能的情况下, 你也可以用以下的简单函数:

// Show/Hide functions for non-pointer layer/objects
function show(id) {
	if (ns4) document.layers[id].visibility = "show"
	else if (ie4) document.all[id].style.visibility = "visible"
}

function hide(id) {
	if (ns4) document.layers[id].visibility = "hide"
	else if (ie4) document.all[id].style.visibility = "hidden"
}

使用以上代码将得到类似结果, 只是必须使用确切的层名, 且必须将其放在括号内:

show("divID")

hide("divID")

在这里divID是你想要显示/隐藏的 DIV 标签.

点击这里看使用此函数的示例.

首页 下一课: 移动
copyright 1998 Dan Steinman
Translated by Cartouche YU