你可以用 JavaScript 来访问和更改层叠样式单定位(CSS-P)中元素中的属性. 但是, 在 Netscape 4.0 和 Internet Explorer 4.0 之间有些句法是不同的. 既然知道了差别所在, 我将向你展示一种简便的方法来创建通用 JavaScripts -- 可以在 N4 和 IE4 中均能正常工作的脚本.
我现在用ns4和ie4来甄别浏览器而不用n和ie.
首先: 我们必须知道如何甄别用户使用的浏览器类型. 下面这段代码将是本指南中几乎所有实例的标准浏览器甄别代码:
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 } }
假如我们有一个如下的 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 值 |
左端 | 50 | 50px |
上端 | 100 | 100px |
显示状态 | show | visible |
我将在以后的部分讲解如何解决这些细小的差别.
首页 | 下一课: 隐藏与显示 |