鼠标位置以及元素大小

1.鼠标坐标位置

clientX clientY  客户区坐标(视口)

pageX pageY  页面坐标

screenX screenY  屏幕坐标

2.元素大小

偏移量 offset-

offsetWidth offsetHeight  带边框元素大小

offsetLeft offsetTop  外边框到带定位的父级元素(或body)内边框的像素

客户区大小 client-

clientWidth clientHeight  不带边框元素大小

clientLeft clientTop  左 上边框宽度

滚动大小 scroll-

scrollWidth scrollHeight  没有滚动条时,元素内容的实际大小

scrollLeft scrollTop  视口外(左 上)的元素内容像素,设置可改变滚动位置

区别:

offset只读

可得到任意样式表的样式值

得到的的值是number,没有单位

offsetWidth包含padding+border+content

style可读写

只能得到行内样式表的样式值

得到的值是string,带单位

style.width不包含padding和border,仅content

总结:

offset-获取元素大小位置

style修改值

记得加上px

区别:

offsetWidth包含padding+border+content

clientWidth不包含border,仅padding+content

区别:当内容超出视口时

clientWidth返回视口中元素大小

scrollWidth返回内容的实际大小

都不包含border

window.pageXOffset  element.scrollLeft

window.pageYOffset  element.scrollTop

原文地址:https://www.cnblogs.com/galaxy2490781718/p/12761393.html