标题: DOCTYPE元素导致页面脚本运行不正常
作者: dnawo
日期: 2007-05-11 06:12 PM
分类: 网页设计
内容: 今天DOCTYPE着实把我愚弄了一番：早上有个客户站点首页要添加浮动广告，于是便把手中测试好的JS放了上去，奇怪的浮动广告怎么都不出来，而在测试页中却正常，在测试页中使用排除法将一个个元素去掉后，最终才发现是DOCTYPE在作怪；下午客户又要求用他们先前的浮动广告，幸好早上只是注释了他们的脚本，很快就还原了，奇怪的是脚本也不起作用了，后来想起来试着加上DOCTYPE，却正常了！
A.早上的JS：
HTML代码
浮动广告
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
B.下午的JS：
复制内容到剪贴板 程序代码<!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>浮动广告</title>
</head>
<body>
<!-- Float AD Begin by Ethan -->
<script language="javascript">
var showad = true;
var Bottompx = 10; //上端位置
var AdDivW = 282; //宽度（图片）
var AdDivH = 402; //高度（图片）
var PageWidth = 800; //页面多少宽度象素下正好不出现左右滚动条
var MinScreenW = 1024; //显示广告的最小屏幕宽度象素
var ClosebuttonHtml = "<div align=\"right\" style=\"color:#FFF;position:absolute;top:0px;height:14px;left:0px;margin:0px;width:100%;padding:0;z-index:2000;\"><a href=\"javascript:void(0);\" onclick=\"hidead()\" style=\"background:#FFF;color:#F30;text-decoration:none;font-size:12px;padding:3px;\">关闭</a></div>";
var AdContentHtml = "<div align=\"center\" style=\"padding-top:1px\"><a href=\"http://www.mzwu.com\"><img border=\"0\" src=\"pic/20070509/Logo_25wht.gif\" alt=\"\" /></a></div>";
document.write ("<div id=\"Javascript.RightDiv\" style=\"position: absolute;border: 1px solid #336699;background-color:#EEEEE2;z-index:1000;width:"+AdDivW+"px;height:"+AdDivH+"px;top:-1000px;word-break:break-all;display:none;\">"+ClosebuttonHtml+"<div>"+AdContentHtml+"</div></div>");
function scall(){
if(!showad){return;}
if (window.screen.width<MinScreenW){
alert("临时提示：\n\n显示器分辨率宽度小于"+MinScreenW+",不显示广告");
showad = false;
document.getElementById("Javascript.RightDiv").style.display="none";
return;
}
var Borderpx = ((window.screen.width-PageWidth)/2-AdDivW)/2;
document.getElementById("Javascript.RightDiv").style.display="";
document.getElementById("Javascript.RightDiv").style.top=document.documentElement.scrollTop+document.documentElement.clientHeight-AdDivH-Bottompx;
document.getElementById("Javascript.RightDiv").style.right="10px";
}
function hidead()
{
showad = false;
document.getElementById("Javascript.RightDiv").style.display="none";
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
</script>
<!-- Float AD End -->
</body>
</html>
上网搜索相关资料后发现Dreamweaver每次生成的第一句代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
它指定了 HTML 文档遵循的文档类型定义(DTD)，如果后面JS事件的一些定义没有遵循这个DTD，那么这个事件既不触发，也不报错。
+ 查看当前日志评论 (1)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.047 ms
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.047 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.047 ms