了解Js中的client,offset

Client

clientWidth,clientHeight 元素内部的宽度和高度,clientTop,clientLeft 元素内边距到其边框的距离,clientX,clientY相当于浏览器窗口到事件的坐标系

clientWidth,clientHeight 元素的宽度高度都会把内边距计算在内,不包括边框,外边距,滚动条.

clientTop,clientLeft 元素的上边框和左边框的宽度

当元素为行内元素时,clientTop,clientLeft 将返回 0;

当出现滚动条时,两种情况

clientLeft 不计算滚动条宽度

clientLeft 计算滚动条宽度

Offset

offsetWidth,offsetheight 元素大小,offsetTop,offsetLeft 其内边距到与其最近祖先元素的距离(受定位影响),offsetX,offsetY 鼠标最近距定位元素的距离

offsetWidth,offsetheight 获取时不包括外边距,其他都计算在内,包括滚动条

offsetTop,offsetLeft 返回元素边框到offsetParent的边界距离(可能为边框或者内边距)

若元素父元素已定位,即以定位元素获取偏移量,若为未定义,即以body为获取偏移

二者都受定位和浏览器影响

offsetX,offsetY 和Top,Left原理相同

posted @ 2020-10-07 16:31  独舟者  阅读(661)  评论(0)    收藏  举报