JS offsetLeft,scrollLeft,clientLeft

最新推荐文章于 2022-09-09 16:55:42 发布

flyfx52

最新推荐文章于 2022-09-09 16:55:42 发布

阅读量78

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/flyfx52/article/details/84533022

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>

flyfx52

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS offsetLeft,scrollLeft,clientLeft

http://www.jb51.net/article/25935.htm[code="java"]offset,clientSet,scrollSet function testOffset(){ document.getElementById("testDiv").innerHTML ="B..05 offsetTop :" +document.getEl...
复制链接

扫一扫