DOM的OffsetX、ClientX和ScrollX

<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相同