body对象

1,dom对象层次一览表

body对象_第1张图片

2,body对象

1onselectstart用户选中文档body体的内容时触发

2onscroll用户拉动滚动条时触发

特别说明: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>

3,

body对象

案例:

一个小太阳,当它碰到边框后,就自动的转变方向,很多流氓网站就有这种广告。

知识点:

1document.body.clientWidth //获得客户端浏览器的宽度

2document.body.clientHeight //获得客户端浏览器的高度

3offsetWidth //获得当前对象的宽度

4offsetHeight //获得当前对象的高度

<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>



你可能感兴趣的:(body对象)