浅谈这么获取屏幕的宽高总结方法

clientY

点击位置距离当前body可视区域的x，y坐标

 

二、pageX、pageY

对于整个页面来说，包括了被卷去的body部分的长度

 

三、screenX、screenY

点击位置距离当前电脑屏幕的x，y坐标

 

四、offsetX、offsetY

相对于带有定位的父盒子的x，y坐标

 

五、x、y

和screenX、screenY一样

 

scrollWidth，clientWidth，offsetWidth的区别:

 

scrollWidth：对象的实际内容的宽度，不包括边线宽度，会随对象中内容超过可视区后而变大。 

 

clientWidth：对象内容的可视区的宽度，不包括滚动条等边线，会随对象显示大小的变化而改变。

 

offsetWidth：对象整体的实际宽度，包括滚动条等边线，会随对象显示大小的变化而改变。

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。 

clientWidth：对象内容的可视区的宽度，不包括滚动条等边线，会随对象显示大小的变化而改变。

offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。

 

1.元素的内容超过可视区，滚动条出现和可用的情况下。

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。

2.元素内无内容或者内容不超过可视区，滚动不出现或不可用的情况下。

scrollWidth=clientWidth，两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。