了解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原理相同

浙公网安备 33010602011771号