通用JavaScript

你可以用 JavaScript 来访问和更改层叠样式单定位(CSS-P)中元素中的属性. 但是, 在 Netscape 4.0 和 Internet Explorer 4.0 之间有些句法是不同的. 既然知道了差别所在, 我将向你展示一种简便的方法来创建通用 JavaScripts -- 可以在 N4 和 IE4 中均能正常工作的脚本.

浏览器甄别:

我现在用ns4ie4来甄别浏览器而不用nie.

首先: 我们必须知道如何甄别用户使用的浏览器类型. 下面这段代码将是本指南中几乎所有实例的标准浏览器甄别代码:

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

对象 document.layers 为 Netscape 4.0 所专用, 而对象 document.all 则属于 IE 4.0. 所以通过检查这些对象是否存在可以让我们设立变量 ns4 (即 Netscape 4.0) 或 ie4 (即 Internet Explorer 4.0) 并根据不同的浏览器来赋予它们"是"或"非". 这样, 当你想判断用户的浏览器类型时你只需使用 if (ns4)if (ie4):

function check() {
	if (ns4) {
		// do something in Netscape Navigator 4.0
	}
	if (ie4) {
		// do something in Internet Explorer 4.0
	}
}

使用 JavaScript 和样式单定位 (CSS-P):

假如我们有一个如下的 DIV 标签:

<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:100; width:30;">
<IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0>
</DIV>

注意这只是个示例, 你可以将 blockDiv 命名为任意其它的名字而毫不影响其使用.

一般来说要获取 Netscape 的 CSS-P 属性方法如下:

document.blockDiv.propertyName
document.layers["blockDiv"].propertyName

对于 Internet Explorer 则是:

blockDiv.style.propertyName
document.all["blockDiv"].style.propertyName

在这里 propertyName 可以是 left, top, visibility, zIndex, width 中的任意一种, 或是任何其他的 CSS-P 属性.

浏览器通用方法 (指针变量):

我发现建立浏览器通用脚本(或叫程序)最好的方法是设立一个变量, 这取决于你所使用的浏览器是 Netscape 还是 IE, 如果是前者, 就指向 document.blockDiv; 如果是后者, 就指向 blockDiv.style, 请看下面的语句. 我把这些变量称做指针变量.

if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style

很显然, 有了这个指针变量, 你就找到了一条捷径以获取 CSS-P 的众多属性. 例如你想察看一个名为 "blockDiv" 的 DIV 标签的左端坐标值, 你只需简单地写下:

block.left

你甚至不用去理会所使用的是什么浏览器, 因为对于 Netscape 来说, block 指向的是 document.blockDiv, 而对于 IE, block 所指的是 blockDiv.style.

附注: 在这份指南中, 我将在所有的 DIV 标签后加注"Div", 如 (squareDiv, blockDiv, 等等). 这是因为当你用指针变量的方法为一个层预设值时, 你不得不先赋予它一个独一无二的名字 -- 它不能与其它的 DIV 标签重名. 所以我在源代码中创建了一个标准: 所有使用指针变量的层都将带有 "Div" 字样, 而指针变量的名字中则没有 -- 这是因为它的使用次数远远多于层本身的名字.

一个完整的示例:

这个例子将弹出一个窗口, 显示 CSS-P 元素的左端 (left), 上端 (top) 和 显示状态 (visiibilty) 属性.

程序脚本:

<SCRIPT LANGUAGE="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function init() {
	if (ns4) block = document.blockDiv
	if (ie4) block = blockDiv.style
}

//-->
</SCRIPT>

HTML:

<BODY onLoad="init()">

<A HREF="javascript:alert(block.left)">left</A> -
<A HREF="javascript:alert(block.top)">top</A> -
<A HREF="javascript:alert(block.visibility)">visibility</A>

<DIV ID="blockDiv" STYLE="position:absolute; left:50; top:100; width:30; visibility:visible;">
<IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0>
</DIV>

</BODY>

点击这里看例子.

注意:BODY onLoad="" 中调用 init() 功能时, 它只能在网页全部内容载入后才被执行. 这是因为只有对已存在的 DIV 标签才能定义指针变量. 如果你试图在页面内容完成载入之前就试图定义变量, 你将看到类似"模块未被定义("block is not defined")"的 JavaScript 错误提示.

差别

用 Netscape 和 IE 打开上面的示例将会得到不同的值.

属性N4 值IE4 值
左端5050px
上端100100px
显示状态showvisible

我将在以后的部分讲解如何解决这些细小的差别.

首页 下一课: 隐藏与显示
copyright 1998 Dan Steinman
Translated by Cartouche YU