<body>
<script>
document.body.οnlοad=function(){alert("!")}
</script>
</body>
既不会发生什么事情,也不算出错。
解决方法:
<body>
<script>
window.οnlοad=function(){alert("!")}
</script>
</body>
关于浮动代码和 documentElement / body
常常有人提问,为什么 漂浮广告 / 对联代码 在 xHTML 1.1 DTD 文件头 / FF 下不能使用
这是因为,按照标准来说,我们看到的窗体的滚动条不应该是 body 的,而是 HTML 的(也就是 document.documentElement 对象)
所以,解决办法是,把以前不标准的代码中, document.body.scrollTop 或者类似的代码变换为 document.documentElement.scrollTop
同名的dom函数(getElementsByName)在ie和firefox下不同表现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>runcode</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="Sheneyan" /> <script type="text/javascript"> window.οnlοad=function(){alert("document.getElementsByName(\"n\").length:"+document.getElementsByName("n").length)} </script> <style type="text/css"> </style> </head> <body> <div name="n">name:n</div> <div name="n">name:n</div> <div name="n">name:n</div> <div name="n">name:n</div> <div id="n">id:n</div> <div id="n">id:n</div> </body> </html>
[ 可以先修改再运行 ]
IE下,用的getElementsByName结果,ID的权值大于name,但是在FF下却不是的
节点在ie和firefox下的不同
节点在ie和firefox下的不同:
childNodes、firstChild、nextSibling、previousSibling
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>runcode</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="Sheneyan" /> </head> <body> <div id="t"> <input /> <input /> <input /> <input /> <input /> <input /> </div> <span id="tt"></span> <script type="text/javascript"> var t=document.getElementById('t'); var tt=document.getElementById('tt'); alert('t的第一个子结点是:'+t.firstChild.nodeName) alert('t下面有'+t.childNodes.length+'个子节点') alert('t的后一个节点是:'+t.nextSibling.nodeName) alert('tt的前一个节点是:'+tt.previousSibling.nodeName) var s=""; for (var i=0;i<t.childNodes.length;i++){ s+="\nt的第"+(i+1)+'个子结点名:'+t.childNodes[i].nodeName; } alert('这些是t的子结点:'+s) </script> </body> </html>
[ 可以先修改再运行 ]
取得元素的真实css属性
/**
*取得元素的真实css属性
*written in 06.7 sheneyan
*/
function gs(d,a){
if (d.currentStyle){
var curVal=d.currentStyle[a]
}else{
var curVal=document.defaultView.getComputedStyle(d, null)[a]
}
return curVal;
}
png半透明图片作背景的兼容方案
png半透明图片作背景的兼容方案(IE5.5+,Firefox1.5,Opera9通过)
为每个png背景建一个这样的类:
/*non IE*/
html>body .pngbg1 {
background: url(../img/toumbg.png) repeat;
}
/*IE*/
html .pngbg1 {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="img/toumbg.png");
}
(备注:"background: url()"的路径相对于文档, "AlphaImageLoader"的路径相对于站点根目录)
Js的实现方式见另外一篇文章:JS小技巧总汇
ie/firefox:禁止选择文字
在ie下,禁止用户选择内容,用脚本可以实现:
<script> document.onselectstart = function(){return false;} </script> <body> 试试看能否选择这些文字? </body>
[ 可以先修改再运行 ]
而在firefox,这样子的写法没法实现相同的功能,刚才google了一下,找到一个类似的功能,不过居然是在css下实现的:
<style>
html *{-moz-user-select: none;}
</style>
<body>
试试看能否选择这些文字?
</body>
ie/ff脚本取得样式表属性float的异同
ie下:style.styleFloat
ff下:style.cssFloat
<div style="float:left;color:red" οnclick="alert(this.style.float+' '+this.style.styleFloat+' '+this.style.cssFloat);alert(this.style.color)">aaa</div>
[ 可以先修改再运行 ]
鼠标按键常量在ie和firefox下的不同
<script type="text/javascript"> function omd(e){ var k=(e?e:event).button; alert("你按的是"+k) } </script> <div οnmοusedοwn="omd(event)">点击我,我告诉你你按的是鼠标哪个键</div>
[ 可以先修改再运行 ]
FF下。左键返回值是0,IE下返回值是1,但是右键都是2,FF居然有跳级。
IE 与 FF 对透明背景的元素表现不同
背景透明的元素( 底下也没有背景 )在 IE 中是点不到的, FF 中就可以
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>Hutia</title> </head> <body> <div style="width:300px; height:300px; border:1px solid black; position:absolute; left:150px; top:150px; z-index:1; background-color:yellow;" οnclick="alert('你点到下面这个层了');" >在 黄色背景地区点击一下看看</div> <div style="width:300px; height:300px;position:absolute; border:1px solid red; z-index:4; left:0px; top:0px; " οnclick="alert('你点到上面这个层了');" >在 没有背景地区点击一下看看, IE 应该不会有反应</div>
[ 可以先修改再运行 ]
另外:
FF 下没有 event
用 arguments[0]
FF 下没有 srcElement
用 target
FF 下没有 parentElement
用 parentNode
总结:
function obj_event_onsomething(e){
var e=window.event?window.event:e;
var srcEle=e.srcElement?e.srcElement:e.target;
var theObjectYouWant=srcEle.parentNode;
}
以前一直都认为document.all是IE 才有的东西,但是FF2.0居然页支持