蒙了吗？offsetLeft、offsetWidth、scrollTop、scrollWidth、event.pageX

1、offsetHeight || offsetWidth = boder + padding + content

两者都是只读属性，如果想

offsetLeft offsetTop 一般是相对于offsetParent计算的，也就是第一个定位的父级

两者都是只读属性

offsetTop 与 style.top 的差别

我们知道 offsetTop 可以获得 HTML 元素间隔上方或外层元素的地位，style.top 也是可以的，二者的差别是：

offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
offsetTop 只读，而 style.top 可读写。
若是没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。

offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样事理。

2、scrollTop、scrollLeft、scrollWidth、scrollHeight

图上标示了scrollTop && scrollHeight

同理scrollWidth和scrollLeft也是一样的

3、event.clientX、event.clientY、event.pageX、event.pageY

event.clientX 是目标点距离浏览器可视范围的X轴坐标

event.clientY 是目标点距离浏览器可视范围的Y轴坐标

event.pageX 是目标点距离document最左上角的X轴坐标

event.pageY 是目标点距离document最左上角的Y轴坐标

蒙了吗？offsetLeft、offsetWidth、scrollTop、scrollWidth、event.pageX相关推荐

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.b ...
js获取屏幕尺寸、clientWidth、offsetWidth、scrollWidth等区别
js获取元素/屏幕宽高总结如下 1.获取网页可视区域宽高(随着页面的缩放,所获取的值会相应改变) 方法一.不包括滚动条的宽高在内 document.documentElement.clientWid ...
四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异...
转自http://blog.163.com/chudaozhe@126/blog/static/1157323432011626112137928/ 网页可见区域宽:document.body.cli ...
offsetX,offsetLeft,offsetWidth的区别详解
offsetX,offsetLeft,offsetWidth的区别 offsetX/offsetY offsetX和offsetY表示(鼠标位置)相对于最近父级元素的坐标(无论父级是否定位)(不管是谁 ...
各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解
1.clientWidth.offsetWidth.scrollWidth <!DOCTYPE html> <html><head><meta charset ...
event.offsetX event.pageX event.clientX 和 obj.offsetLeft学习笔记
一.问题描述工作中,需要在航拍图中添加摄像头在航拍图中的位置,因此,需要开发一个功能:鼠标点击航拍图(背景),显示鼠标点击位置在页面中的位置(pageX和pageY),然后将坐标数据告诉后台,手动 ...
JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset
value description offsetWidth 返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) offsetHeight 返回元素的高度(包括元素高度.内边距和边框,不包括外边 ...
clientX,pageX,screenX，offsetLeft，scrollTop
这个东西,以为理解了,今天彻底弄弄. clientX 观点:鼠标相对于WINDOWS的坐标. 这里这个WINDOWS是指我们能看见的浏览器大小.所以不可能超过显示器的大小,如 screen.width ...
JS中的位置和宽度：clientWidth、offsetWidth、scrollWidth等区别
首先定义一个div. 然后稍微装修一下下面开始区分一.clientWidth和clientHeigh . clientTop和clientLeft 1,clientWidth的实际宽度 clien ...