25一/100
DOCTYPE对CSS及JS的影响
也许你已经发现选用或不用DOCTYPE对你的页面的影响是非常大的，甚至对于不同浏览器结果也不一样。下文以对一段javascript的影响说明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>divTest</title> <script> function changeHeight() { document.getElementById("content").style.height="360"; alert(document.getElementById("content").style.height); alert(document.getElementById("content").offsetHeight); } </script> </head> <body> <div id="content" style="height: 60px; border: 1px solid #FF0000;"><a href="javascript:changeHeight()">aa</a></div> </body>
上文页面是通过按aa超链接表现javascript控制div的高度，读者可以自己试一下
1. IE浏览（我用的是IE 6），content的高度会变大，同时alert出height:360，offsetHeight:362
2. firefox，content的高度不会变，同时alert出height:60，offsetHeight:62
3. 去掉最上面的一句
在firefox下将得到content的高度会变大，同时alert出height:360，offsetHeight:362
我曾看到好多人运行到这里就会得到一个结论去他的DOCTYPE，用了它好多东西都不对了。我以为不是这样的，DOCTYPE定义了一个规范集，去检验你代码的正确性规范性，去掉了DOCTYPE也许只会在你当前机器上的浏览器正确运行，也就是说你的程序不能做到通用，难道这是你追求的吗？这时你会说那上面的问题怎么办呢，难道在firefox就不能那么做吗？回答是当然可以，仔细看一下上面的代码其实是有问题的，在标准中对象的高度、大小必须指定单位的如px,pt等，如果不指定那就要依赖于应用浏览器的默认或支持情况了，因此修改代码如下：
<script> function changeHeight() { document.getElementById("content").style.height="360px"; alert(document.getElementById("content").style.height); alert(document.getElementById("content").offsetHeight); } </script>
运行一下看看是不是对了呢？ 定义DOCTYPE是个好习惯，也希望大家能写出标准规范的代码。
没有相关文章.
