Cross-Browser javascript
翻译: QQlan

你可以使用javascript改变CSS-P的位置. ns4.0和 ie4.0的用法上有一些差异.
这里将交你一个简单的方法创建跨borwser的javascripts (both ns4 & ie4)

检测Browser:
现在用 n 和ie表示ns4 和ie4.
首先的首先: 我们必须知道用户使用那种browser. 下面的code 将在大部分教程中使用.

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



document.layers (ns4 only) 而document.all(ie only). 我们创建boolean variable(布尔变量)通过"true" or "false" 检测用户的borwser. 现在对不同的browser, 你只要使用 if (ns4) 或者if (ie4)


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




Using javascript and CSS-P:
假设我们有这样一个DIV 标签

记住这只是一个例子, 你可以用其他的符号替换 blockDiv

对于NS, CSS-P 表示为:

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

对于IE, 表示为:

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

这里 propertyName 可以表示为left, top, visibility, zIndex, width, 或者任何CSS-P 属性.

跨borwser方法(指针变量--Pointer Variables)

一个最好的方法是使用变量,代替NS & IE所需要的不同的代码,我称它为 pointer variables .比如下面:

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


看, 写代码的时候使用了捷径. 比如你现在想要检查左边的坐标. DIV tag取名"blockDiv", 他将变得很简单:

block.left

现在for NS. block 指向 document.blockDiv
for IE. block 指向 blockDiv.style

旁注: 整个教程中, 每一个DIV tag的名字后面我们都会加上"Div"(squareDiv, blockDiv, etc.) 因为当你使用pointer variable初始化一个层, 你必须选择一个唯一的变量名字 -- 它不能和你的DIV tag名字相同. 我的习惯是: 将所有用到指针变量的层的名字后面加"Div", 而指针变量没有"Div" -- 你将会发现调用pointer variable 的次数远远多于调用层本身.


完整的例子

例子中将回弹出窗口告诉你一个CSS-P元素的 left, top 和visibilty属性值.

script 部分:






HTML部分:



left -
top -
visibility

样例: javascript1.html (http://www.dansteinman.com/dynduo/examples/javascript1.html )

Important:
我在BODY onLoad="" 中调用了 init() , 这样, script会在页面全部下载以后才执行.
因为只有DIV tag存在, 才能定义pointer variable. 如果DIV tag 还没有随页面完全下载, 运行javascript会出现"block is not defined" 的错误.

不同之处
打开NS 和IE 同时测试这个例子,你会得到不完全一样的结果:
Property Netscape 4 value IE 4 value
left 50 50px
top 100 100px
visibility show visible

这些不同会在以后制造更多的麻烦, 后面的章节我们会学习怎样解决.



--------------------------------------------------------------
5DMedia 版权所有, 转载请注明出处.