如何使你编写的DHTML兼容IE和NS浏览器
作者：ahao
由于不同的浏览器的元素和元素的性质名字有所不同, 我们应该知道如何让你的程序在两
种主要的浏览器 NS4 和 IE4 中都工作
浏览器检测:
首先, 我们应该知道如何来知道用户用的是哪种浏览器. 下面这段程序虽然比较简单但足
以区别 NS4 和 IE4.
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
document.layers 是 Netscape 4 专有的， 而do
cument.all 却是 IE 4 专有的. 所以检
查这些专有 object 存在与否可以帮助我们设立变量 ns4(为 Netscape 4.0) 和 ie4 (为
Internet Explorer 4.0). 如果do
cument.layers存在, 就让 ns4 等于 ture. 如果
document.all 存在， 就让 ie4 等于 true. 这样，以后你如果需要知道用户用的是那个
浏览器， 检查这两个变量就可以了
function check() {
if (ns4) {
//do
something in Netscape Navigator 4.0
}
if (ie4) {
//do
something in Internet Explorer 4.0
}
}
使用 JavaScript 和 CSS-P:
假如我们有一个如下的 DIV tag：
</p>
<div ID="blockDiv" STYLE="position:absolute;
left:200;
top:100">
<dd><img SRC="file://D:/dhtmlstudy/dhtml3.htm/xxx.jpg" WIDTH="xx"
HEIGHT="xx" BORDER="0"> <img
src="FrontPage:html_bitmap"></dd>
</div><p>DIV 的名字是随你起的. 但当你给了它名字以后, <B style="
color:black;background-color:#99ff99">JavaScript</B>
就要参照这个名字来控制它. 下面告诉你 <B style="color:black;
background-color:#99ff99">JavaScript</B>
如何参照这个名字的. </p>
<p>对 <B style="color:black;background-color:#A0FFFF">Netscape</B>
来说， 得到 CSS-P 性质 (property) 的方法如下: </p>
<pre> do
cument.blockDiv.propertyName
</pre>
<p>或者是 </p>
<pre> do
cument.layers[&quot;blockDiv&quot;].propertyName
</pre>
<p>而对于 Internet Explore 来说， 要用 </p>
<pre> blockDiv.style.propertyName
</pre>
<p>或者是 </p>
<pre> do
cument.all[&quot;blockDiv&quot;].style.propertyName
</pre>
<p><b>propertyName</b> 可以是任何一个 DIV 可以用的 CSS－P 的性质, 比如
left, top, visibility, zIndex, width。 </p>
<p>一个比较好的使得你的程序通用于 <B style="color:black;
background-color:#A0FFFF">Netscape</B> 和 <B style="color:black;
background-color:#ffff66">IE</B>
的方法是设立一个变量. </p>
<pre> if (ns4) block =do
cument.blockDiv
if (ie4) block = blockDiv.style
</pre>
<p>你可以注意到, 有了这个指针变量,
我们以后可以用简便的方法得到或改变 CSS-P 的性质.
因为无论你用的是那种浏览器, 对于这个DIV, 我们都用 block 来表示.
比如你想看看一个名字为 &quot;blockDiv&quot;
的 Div tag
的横向左边坐标是多少, 可以 </p>
<pre> block.left
</pre>
</td>
</tr>
</tbody>
</table>
<hr align="center" width="80%" color="#000000">
<p align="right"> <a href="ds2.htm">上一节</a> <a href="ds4.htm">下一节
</a> </td>
<td width="10%"></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="49">
<tr>
<td width="100%" height="13"><hr color="#000000" width="90%">
</td>
</tr>
</table>
</body>
</html>
