1,dom对象层次一览表
2,body对象
1、onselectstart用户选中文档body体的内容时触发
2、onscroll用户拉动滚动条时触发
特别说明:onscroll在使用时需要遵循html4.0的标准,否则不能执行,也可以使用window.onscroll=函数名来代替body对象的onscroll事件
<html> <head> <title>document示例</title> <script language="javascript" type="text/javascript"> <!-- function window_onscroll(){ myHref.style.top=document.body.scrollTop+50; myHref.style.left=document.body.scrollLeft; } function document_onselectstart(){ alert("121"); return false;//返回false,可以禁止用户选网页中的文本;当用户选文本时会触发onselectstart事件,返回false就不会选中 //也可在body中加入onselectstart="return false"同样达到这个效果 } //--> </script> <script language="javascript" for=document event=onselectstart> <!-- //这样等于与在body上写入onselectstart="return false" return document_onselectstart(); //--> </script> </head> <body onscroll="return window_onscroll()"> <TEXTAREA id="Textareal" name="Textareal" rows="500" cols="500"> asdfzxcvqwerzasdvzxcfawdsf </TEXTAREA> <a id="myHref" href="http://www.sohu.com" style="left:0px;position:absolute;top:50px;word-break:keep-all"> <img src="sohu.jpg" />//随便找个图片 </a> </body> </html>
body对象
案例:
一个小太阳,当它碰到边框后,就自动的转变方向,很多流氓网站就有这种广告。
知识点:
1、document.body.clientWidth //获得客户端浏览器的宽度
2、document.body.clientHeight //获得客户端浏览器的高度
3、offsetWidth //获得当前对象的宽度
4、offsetHeight //获得当前对象的高度
<html> <head> <title>document示例 </title> <script language="javascript" type="text/javascript"> <!-- //定两个方向 var directX=1;//X轴的方向 var directY=1;//Y轴的方向 var sunX=0;//太阳的坐标 var sunY=0; var speed=1; function sunMove(){ sunX+=directX*speed; sunY+=directY*speed; var sundiv=document.getElementById("sundiv"); //修改div的left top sundiv.style.top=sunY+"px"; sundiv.style.left=sunX+"px"; //判断什么时候转变方向 //判断X方向转向 (offsetWidth可以返回当前对象的实际宽度) if(sunX+sundiv.offsetWidth>=document.body.clientWidth||sunX<=0){ directX=-directX; } //上面的if语句等价于下面的if /*if(sunX+sundiv.offsetWidth>=document.body.clientWidth){ divectX=-1; }else if(sunX<=0){ divectX=1; }*/ //判断Y方向转向 if(sunY+sundiv.offsetHeight>=document.body.clientHeight||sunY<=0){ directY=-directY; } } setInterval("sunMove()",10); //--> </script> </head> <body style="background-image: url('./ship.jpg');background-repeat:no-repeat;"> <div id="sundiv" style="position:absolute"> <img src="sun.gif" /> </div> </body> </html>