DOM的OffsetX、ClientX和ScrollX

最新推荐文章于 2023-07-05 15:40:48 发布

mole

最新推荐文章于 2023-07-05 15:40:48 发布

阅读量1.6k

点赞数

分类专栏： JavaScript JQuery 文章标签： DOM 位置 offset client

未经本人同意，禁止复制文章内容

本文链接：https://blog.csdn.net/mole/article/details/78014048

版权

JavaScript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

JQuery

18 篇文章 0 订阅

订阅专栏

本文详细解析了CSS中div元素的各种布局与尺寸属性，包括offsetLeft、clientLeft、scrollLeft等距离与位置属性的区别，以及offsetWidth、clientWidth、scrollWidth等宽度属性的含义。通过实际例子展示了这些属性如何在页面布局中应用。

摘要由CSDN通过智能技术生成

<div id='a' style='background-color:grey;width:300px;height:300px;padding:5px;border-width:4px;border-style:solid;margin:3px'>
	<div id='b' style='z-index:100;border-style:solid;border-color:black;background-color:green;width:200px;height:200px;padding:10px;border-width:5px;margin:1px'>
		<a href='#' οnclick='c(e)'>点击</a>
	</div>
</div>

上图蓝色基调的是外层div，小方框是内部div。

var b = document.getElementById('b');
console.log ('b.offsetLeft=' + b.offsetLeft) // 13
console.log ('b.clientLeft=' + b.clientLeft) // 5
console.log ('b.scrollLeft=' + b.scrollLeft) // 0
console.log ('$("#b").position().left=' + $('#b').position().left) // 12
console.log ('$("#b").offset().left=' + $('#b').offset().left) // 13
console.log ('b.offsetWidth=' + b.offsetWidth) // 200
console.log ('b.clientWidth=' + b.clientWidth) // 190
console.log ('b.scrollWidth=' + b.scrollWidth) // 190
console.log ('$(”#b“).width()=' + $('#b').width()) // 170
console.log ('$(”#b“).innerWidth()=' + $('#b').innerWidth()) // 190
console.log ('$(”#b“).outerWidth()=' + $('#b').outerWidth()) // 200

b..offsetLeft：当前document的左边界到当前元素的border左侧的距离，其值等于父元素的margin + border + padding

b..clientLeft：当前元素的border的实际宽度

b..scrollLeft：当前元素滚动的左边界

$('#b').position().left：当前元素最外侧到父元素最外侧，其值等于父元素的margin + border + padding

$('#b').offset().left：当前元素的边框外侧到父元素最外侧，其值等于$('#b').position().left + 当前元素的margin

b.offsetWidth：当前元素不包括margin的总宽度

b.clientWidth：当前元素不含margin、border的总宽度

b.scrollWidth：当前元素不含margin、border的总宽度

$(”#b“).width()：当前元素内容区域宽度，即不包括margin、border、padding的宽度

$(”#b“).innerWidth()：与b.clientWidth相同

$(”#b“).outerWidth()：与b.offsetWidth相同