【clientX，offsetX，screenX】【scrollWidth，clientWidth，offsetWidth】的区别

一、深刻认识clientX&＃xff0c;offsetX&＃xff0c;screenX

概念&＃xff08;来源于网络&＃xff09;&＃xff1a;

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

实验实例&＃xff08;来源于网络&＃xff0c;修改过&＃xff09;&＃xff1a;

实验结果分析&＃xff1a;

1. 1.   clientX 和x值在实验过程中&＃xff0c;没有发现值不一样的例子&＃xff0c;所以我认为它们在效果上是一样的&＃xff01;
   2.   offsetX 是相对于当前窗口内&＃xff0c;本触发事件对象&＃xff08;或者是某一区域&＃xff09;而言&＃xff0c;如本例中你单击a区域&＃xff0c;值是相对于a所在区域而言&＃xff0c;同理b&＃xff0c;c&＃xff0c;d都一样&＃xff01;
   3.   clientX &＃xff0c;x&＃xff0c;offsetX共同点&＃xff1a;它们是相对位置&＃xff0c;相对于当前窗口&＃xff0c;只是offsetX相对于当前窗口的某个触发对象的父容器而言&＃xff01;
   4.   screenX是相对与客户端显示器而言&＃xff0c;是绝对位置&＃xff01;

【转载】http://blog.csdn.net/weinideai/article/details/3885444

二、scrollWidth,clientWidth与offsetWidth的区别

(注意&＃xff1a;CSS中的margin属性&＃xff0c;与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

scrollWidth 
是对象的实际内容的宽&＃xff0c;不包括边线宽度&＃xff0c;会随对象中内容的多少改变&＃xff08;内容多了可能会改变对象的实际度&＃xff09;

clientWidth 
是对象可见的宽度&＃xff0c;不包括滚动条等边线&＃xff0c;会随窗口的显示大小改变。

offsetWidth 
是对象的可见宽度&＃xff0c;包括滚动条等边线&＃xff0c;会随窗口的显示大小改变。 

一个scrollWidth和clientWidth的例子&＃xff1a;

在文本框内输入内容&＃xff0c;当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。当一行内容超出文本框的宽度&＃xff0c;就有横向滚动条出来了&＃xff0c;scrollWidth的值就变了。 
scrollWidth是对象实际内容的宽度。 
clientWidth是对象看到的宽度&＃xff08;不含边线&＃xff09;。 

一个clientWidth和offsetWidth的例子&＃xff1a;

offsetWidth的值总是比clientWidth的值大。 
clientWidth是对象看到的宽度&＃xff08;不含边线&＃xff09; 
offsetWidth是对象看到的宽度&＃xff08;含边线&＃xff0c;如滚动条的占用的宽&＃xff09;

【转载】http://blog.csdn.net/weinideai/article/details/3880600