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 中关于 top、clientTop、scrollTop、offsetTop 在 JavaScript 中，top、clientTop、scrollTop 和 offsetTop 是四个常用的属性，它们都与元素的位置或尺寸相关。下面，我们将详细介绍这四个属性的含义、用法和...
5. `clientLeft`和`clientTop`：返回内边距外边缘到边框外边缘的距离，通常意义不大。 6. `scrollWidth`和`scrollHeight`：包括内容、内边距和溢出部分，即使元素溢出也会被计算在内。 7. `scrollLeft`和`scrollTop`...
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果，这种时候我们经常会用到一些元素位置和尺寸的计算，浏览器兼容性问题也是不可忽略的一部分，要想写出预想效果的JavaScript代码，我们需要了解一些...
4. `scrollLeft`, `scrollTop`：这两个属性用于获取或设置元素的水平和垂直滚动位置。在某些情况下，可能需要结合使用来获取元素相对于视口的实际位置。 5. `pageXOffset`和`pageYOffset`：这两个是window对象的...
var left = box.left + scrollLeft - clientLeft; return { top: Math.round(top), left: Math.round(left) }; } ``` 在这个函数中，我们首先获取了元素的`getBoundingClientRect`对象，它包含了元素相对于视口...
offest.left = node.offsetLeft + offest.left - node.scrollLeft; // position = fixed: 获取值后退出递归 if (_position === 'fixed') { return; } getOffset(node.parentNode); } } ``` 这个实现方式首先...
可以通过`offsetTop`和`offsetLeft`属性获取元素相对于其最近的定位父元素的坐标，而`offsetWidth`和`offsetHeight`则提供了元素的总宽度和高度，包括内边距和边框。 **视口坐标**则是指元素在当前可视窗口中的位置...
第一组：offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent 第二组：clientWidth,clientHeight,clientLeft,clientTop 第三组：scrollWidth,scrollHeight,scrollLeft,scrollTop 详细定义如下： ...
return { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop }; } ``` 3. **元素位置获取**：`getPosition`函数用于...
- **offsetLeft和offsetTop**：这两个属性返回元素相对于其最近的定位祖先元素的左边界和顶边界的偏移量，包括边框，但不包括外边距。 4. **其他相关属性** - **scrollLeft和scrollTop**：用于获取或设置元素的...
- `client`系列：`clientLeft`和`clientTop`获取元素左边框和上边框的宽度，`clientWidth`和`clientHeight`仅考虑内容区域的宽高。 - `scroll`系列：`scrollLeft`和`scrollTop`表示元素的水平和垂直滚动距离，`...
* clientWidth、clientHeight、clientTop、clientLeft * offsetWidth、offsetHeight、offsetTop、offsetLeft * scrollWidth、scrollHeight、scrollTop、scrollLeft * scrollIntoView()、scrollIntoViewIfNeeded() * ...
body = document.body, pos = obj.getBoundingClientRect(), st = html.scrollTop || body.scrollTop, sl = html.scrollLeft || body.scrollLeft, ct = html.clientTop || body.clientTop, cl = html.clientLeft ||...
在提供的数据中，我们可以看到在Chrome和IE的这两种DOCTYPE下，`clientTop`、`clientLeft`、`clientWidth`、`clientHeight`、`scrollTop`、`scrollLeft`、`scrollWidth`、`scrollHeight`、`offsetTop`、`offsetLeft`...
7. `clientHeight`, `clientLeft`, `clientTop`, `clientWidth`: 这些属性提供元素的内部尺寸，不包括边框、滚动条或外边距。 8. `dataFld`, `dataSrc`: 在数据绑定中使用，分别设置与指定数据源关联的字段和数据源...
8. clientLeft：获取 offsetLeft 属性和客户区域的实际左边之间的距离。该属性控制 Select 元素的左边距。 9. clientTop：获取 offsetTop 属性和客户区域的实际顶端之间的距离。该属性控制 Select 元素的顶端距。 ...
c={ x:elmt.offsetLeft, y:elmt.offsetTop }; //c.x=this.parseInt(c.x); //c.y=this.parseInt(c.y); if (withMargin){ var m=this.getMargin(elmt); ...