youguo2
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为元素的实际宽度。

分类:

技术点:

相关文章:

  • 2021-12-03
  • 2021-06-16
  • 2022-01-12
  • 2022-12-23
  • 2022-12-23
  • 2021-09-04
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2021-07-08
  • 2022-01-08
  • 2022-12-23
  • 2021-11-18
  • 2022-12-23
相关资源
相似解决方案