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>
分享到：
相关推荐
在JavaScript和Web开发中，了解DOM元素的定位属性至关重要，特别是`offsetLeft`, `left`, 和`clientLeft`之间的区别。这些属性可以帮助开发者精确地控制和计算元素在页面上的位置和大小。 首先，`offsetLeft`是元素...
### JS中offsetTop、clientTop、scrollTop、offsetHeight各属性详解 #### 一、概述 在JavaScript中，处理页面布局和滚动效果时经常会用到一些DOM属性，如`offsetTop`、`clientTop`、`scrollTop`和`offsetHeight`等...
2. **`clientTop` 和 `clientLeft`**：用于获取元素本身的边框宽度。 3. **`getBoundingClientRect()`**：返回一个对象，包含当前元素的顶部、底部、左侧和右侧距离视口（viewport）的距离，单位为像素。 #### 二、...
Js 中关于 top、clientTop、scrollTop、offsetTop 在 JavaScript 中，top、clientTop、scrollTop 和 offsetTop 是四个常用的属性，它们都与元素的位置或尺寸相关。下面，我们将详细介绍这四个属性的含义、用法和...
5. `clientLeft`和`clientTop`：返回内边距外边缘到边框外边缘的距离，通常意义不大。 6. `scrollWidth`和`scrollHeight`：包括内容、内边距和溢出部分，即使元素溢出也会被计算在内。 7. `scrollLeft`和`scrollTop`...
1. `clientTop` 和 `clientLeft`：这两个属性返回元素内容区域（不包括边框）距离其容器顶部和左侧的像素值。 2. `offsetTop` 和 `offsetLeft`：这两个属性返回元素相对于其最近的定位祖先元素（或包含块）的上边缘...
4. `scrollLeft`, `scrollTop`：这两个属性用于获取或设置元素的水平和垂直滚动位置。在某些情况下，可能需要结合使用来获取元素相对于视口的实际位置。 5. `pageXOffset`和`pageYOffset`：这两个是window对象的...
`offsetTop` 和 `offsetLeft` 能够获取相对于定位容器的位置，而 `clientTop` 和 `clientLeft` 描述的是元素的边框宽度。`getBoundingClientRect()` 则提供了一个更全面的解决方案，包括元素相对于视口的位置信息。...
我们将以div元素为例，探讨clientHeight、clientWidth、offsetHeight、offsetWidth、clientTop、clientLeft、offsetTop、offsetLeft、scrollTop、scrollLeft和offsetParent这些属性。 clientHeight和clientWidth ...
为了实现这些功能，开发者需要熟悉一些关键的DOM属性，包括`offsetWidth`, `clientWidth`, `scrollWidth`, `offsetHeight`, `clientHeight`, `scrollHeight`, `offsetLeft`, `clientLeft`, `scrollLeft`, `offsetTop...
本文将详细解析JavaScript中有关鼠标事件和对象坐标控制的几个关键属性，包括clientHeight、offsetTop、offsetLeft、offsetHeight、offsetWidth、offsetParent、clientLeft、clientTop、clientWidth以及scroll相关...
var left = box.left + scrollLeft - clientLeft; return { top: Math.round(top), left: Math.round(left) }; } ``` 在这个函数中，我们首先获取了元素的`getBoundingClientRect`对象，它包含了元素相对于视口...
JavaScript作为前端开发中不可或缺的脚本语言，提供了丰富的DOM操作接口，其中offset、client、scroll属性是常用的一组用于获取元素尺寸和位置信息的接口。这组属性可以帮助开发者精确地获取元素的尺寸、位置以及...
offest.left = node.offsetLeft + offest.left - node.scrollLeft; // position = fixed: 获取值后退出递归 if (_position === 'fixed') { return; } getOffset(node.parentNode); } } ``` 这个实现方式首先...
在JavaScript中，有两个主要属性用于获取元素的内容尺寸：`clientHeight`和`clientWidth`。这两个属性返回元素内部的宽度和高度，包括内容区和内边距，但不包含边框和外边距。在Internet Explorer下，`clientWidth`...
JavaScript提供了三组常用的属性来帮助我们实现这些功能，它们分别是offset系列、client系列和scroll系列。下面将详细介绍这些属性的使用方法。 首先，我们从offset系列属性开始介绍。offset系列属性包含offsetTop...