【client】与【offset】

上面主要区分了【offset】和【client】开头的各个属性的意义，下面这张图是转载的，又加入了【scroll】开头的，和元素本身的【style】

clientWidth   是对象看到的宽度（不含border）
scrollWidth   是对象实际内容的宽度（若无padding，那就是边框之间距离，如有padding，就是左padding和右padding之间距离）。
offsetWidth  是指对象自身的宽度，整型，单位像素（含border，如滚动条的占用的宽，值会随着内容的输入而不断改变）。

 

 

好吧，第一张图看不清，我把代码贴下面了。

 

 CSS代码 
body    { margin:10px; padding:10px; font-size:10px; }
div.v1   { margin:10px 30px; padding:20px; border:10px solid #000; border-left:20px solid red; }
div.v2   { margin:10px 30px; padding:20px; border:10px solid #000; border-left:15px solid green; }
p         { margin:20px 50px; border:10px solid red; padding:20px; border-left:15px solid #F3F;}

 JS代码 
$(function(){
var oP=document.getElementById("replace");

var offsetWidth = oP.offsetWidth; 　　    // 当前对象 【content+padding+border】
var offsetHeight = oP.offsetHeight; 　　  // 怎么只有padding+border?
var clientWidth = oP.clientWidth; 　　     // 当前对象 【content+padding】
var clientHeight = oP.clientHeight; 　　    // 只有padding啦？

var offsetLeft = oP.offsetLeft; 　　　　   // 所有上级包括body的【padding-left、border-left、margin-left值】+【当前元素的margin-left值】 。我暂时理解为：当前元素从边框以外抵达窗口左边界的距离
var offsetTop = oP.offsetTop; 　　　　   // 暂时理解为当前对象从边框以外抵达窗口上边界的距离
// 以上这俩，FF有兼容问题，不会计算上body的border值
var clientLeft = oP.clientLeft;　　　　     // 当前对象【border】宽度
var clientTop = oP.clientTop; 　　　　    // 当前对象【border】高度

$("#replace").text("offsetLeft: " + offsetLeft);
})

 HTML结构 
<div class="v1">
　　<div class="v2">
　　　　<p id="replace"></p>
　　</div>
</div>

  追加点东西，在下面  

易混淆点：

clientX     设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 
clientY     设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 
offsetX    设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 
offsetY    设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 
screenX   设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 
screenY   设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 
x            设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。 
y            设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。