`

JS offsetLeft,scrollLeft,clientLeft

 
阅读更多
http://www.jb51.net/article/25935.htm 


<html>
<title>offset,clientSet,scrollSet</title>
<script>
	function testOffset(){
		document.getElementById("testDiv").innerHTML  ="B..05  offsetTop :" +document.getElementById("button5").offsetTop +"<br/>";
		document.getElementById("testDiv").innerHTML  +="B..05  offsetLeft :" +document.getElementById("button5").offsetLeft+"<br/>";
		document.getElementById("testDiv").innerHTML  +="B..05  offsetWidth :" +document.getElementById("button5").offsetWidth +"<br/>";
	}
	
	function testOffset2(){
		document.getElementById("testDiv").innerHTML  ="B..05  offsetTop :" +document.getElementById("button51").offsetTop +"<br/>";
		document.getElementById("testDiv").innerHTML  +="B..05  offsetLeft :" +document.getElementById("button51").offsetLeft+"<br/>";
		document.getElementById("testDiv").innerHTML  +="B..05  offsetWidth :" +document.getElementById("button5").offsetParent.offsetWidth +"<br/>";
	}
	
document.getElementById("outDiv").onscroll =doScroll;
	
	function doScroll(){
		 document.getElementById("testDiv").innerHTML += "scrollTop:"+document.getElementById("innerDiv").scrollTop;
	}
</script>

<style>

</style>
<body">
<div id="tool" style ="border:solid 1px red;">
	<input type="button" id="button1" value="B..01"> <br/>
	<input type="button" id="button2" value="B..02" ><br/>
	<input type="button" id="button3" value="B..03" ><br/>
	<input type="button" id="button4" value="B..04" ><br/>
	<input type="button" id="button5" value="B..05" ><br/>
</div>
<div id="tool2" style ="border:solid 1px red;> <!---position:absolute; left:150px; top:200px"-->
	<input type="button" id="button11" value="B..01"> <br/>
	<input type="button" id="button21" value="B..02" ><br/>
	<input type="button" id="button31" value="B..03" ><br/>
	<input type="button" id="button41" value="B..04" ><br/>
	<input type="button" id="button51" value="B..05" ><br/>
</div>


----------------------------------------------------------<br/>
<input type="button" onclick="testOffset()" value="offset"> 

<input type="button" onclick="testOffset2()" value="offset2"> 

============================================================================================================

</br>


<div id="testDiv" style ="border:solid 2px red;width:300px;height:300px">
</div>
</body>
</html>


Scroll DIV获取滚动条时间和scrollTop，scrollLeft

<html>
<title>offset,clientSet,scrollSet</title>
<script>
function load(){
	document.getElementById("outDiv").onscroll =doScroll;
}
function doScroll(){
	
	document.getElementById("testDiv").innerHTML = "scrollTop:"+document.getElementById("outDiv").scrollTop+"<br/>";
	document.getElementById("testDiv").innerHTML += "scrollLeft:"+document.getElementById("outDiv").scrollLeft;
	}
</script>

<style>

</style>
<body onload="load()">
<div  id="outDiv" style="width:200px;height:200px;background-color:#999999;overflow:auto;" >
 <div style="width:100px;height:300px;background-color:#FFFF00;" id="innerDiv"> 
  11111111111111112222222222222222222222333333333333333333333333333333344444444444444444444
 </div>
</div>
--------------------------------------------------------------------------
<br>

<div id="testDiv" style ="border:solid 2px red;width:300px;height:300px">
</div>
</body>
</html>
分享到：
| java File 路径问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics