value	description
offsetWidth	返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
offsetHeight	返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
clientWidth	返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
clientHeight	返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
style.width	返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
style.height	返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
scrollWidth	返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同
scrollHeigh	返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同
offsetTop	返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位(css中position属性值为relative、absolute或者fixed)的，则是获取上外边缘距离文档内壁的距离。
offsetLeft	此属性和offsetTop的原理是一样的，只不过方位不同
scrollLeft	此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离。
scrollTop	此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。

style.width 返回的是字符串，如 28px，offsetWidth 返回的是数值28；
style.width/style.height与scrollWidth/scrollHeight是可读写的属性，clientWidth/clientHeight offsetWidth/offsetHeight是只读属性
style.width的值需要事先定义，否则取到的值为空。而且必须要定义在 html 里(内联样式)，如果定义在css里，style.height的值仍然为空，但元素偏移有效；而 offsetWidth 则仍能取到。

鼠标事件发生时：（不管是onclick，还是omousemove，onmouseover等）

value	description
clientX	鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；不随滚动条滚动而改变；
clientY	鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；不随滚动条滚动而改变；
pageX	鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；随滚动条滚动而改变；
pageY	鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；随滚动条滚动而改变；
screenX	鼠标相对于显示器屏幕左上角x轴的坐标；
screenY	鼠标相对于显示器屏幕左上角y轴的坐标；
offsetX	鼠标相对于事件源左上角X轴的坐标
offsetY	鼠标相对于事件源左上角Y轴的坐标

offsetLeft、offsetTop 例子

例1：

<body>
<style>body { margin:0;  }.box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; }.box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; }.box3 { width:100px; height:100px; margin:100px; background:#999;}
</style>
<div class="box1"><div class="box2"><div class="box3"></div></div>
</div>
<script>var oBox1 = document.querySelector('.box1');var oBox2 = document.querySelector('.box2');var oBox3 = document.querySelector('.box3');console.log('box1: '+ oBox1.offsetLeft +','+ oBox1.offsetTop);console.log('box2: '+ oBox2.offsetLeft +','+ oBox2.offsetTop);console.log('box3: '+ oBox3.offsetLeft +','+ oBox3.offsetTop);
</script>
</body>

其中，三个div的上一级的定位元素都是body，body是最外层的定位元素，三个div获取到的offsetLeft值跟offsetTop值都是相对于body的偏移量。

例2(给box1添加相对定位)：

<body>
<style>body { margin:0;  }.box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; position:relative;}.box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; }.box3 { width:100px; height:100px; margin:100px; background:#999;}
</style>
<div class="box1"><div class="box2"><div class="box3"></div></div>
</div>
<script>var oBox1 = document.querySelector('.box1');var oBox2 = document.querySelector('.box2');var oBox3 = document.querySelector('.box3');console.log('box1: '+ oBox1.offsetLeft +','+ oBox1.offsetTop);console.log('box2: '+ oBox2.offsetLeft +','+ oBox2.offsetTop);console.log('box3: '+ oBox3.offsetLeft +','+ oBox3.offsetTop);
</script>
</body>

第二个例子中，box1 加上了相对定位，这时候
box2，box3 的上一级定位元素不再是 body 了，这时他们获取到的 offsetLeft 值offsetTop值都是相对于 box1 的偏移量。
而 box1 的上一级定位元素还是 body ，所以他的偏移量还是相对于 body 的。

例3（给box1，box2添加相对定位）：

<body>
<style>body { margin:0;  }.box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; position:relative; }.box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; position:relative; }.box3 { width:100px; height:100px; margin:100px; background:#999;}
</style>
<div class="box1"><div class="box2"><div class="box3"></div></div>
</div>
<script>var oBox1 = document.querySelector('.box1');var oBox2 = document.querySelector('.box2');var oBox3 = document.querySelector('.box3');console.log('box1: '+ oBox1.offsetLeft +','+ oBox1.offsetTop);console.log('box2: '+ oBox2.offsetLeft +','+ oBox2.offsetTop);console.log('box3: '+ oBox3.offsetLeft +','+ oBox3.offsetTop);
</script>
</body>

第三个例子中，box1 跟 box2 都加上了相对定位，这时候，
box3 的上一级定位元素变成是 box2，
box2 的上一级定位元素是 box1，
box1 的上一级定位元素还是 body。
所以这时候就出现了。三个div的偏移量都为100；

通过上面的三个例子不难看出，offsetLeft值跟offsetTop值的获取跟父级元素没关系，而是跟其上一级的定位元素(除position:static;外的所有定位如fixed,relative,absolute)有关系。

例4：基于例3获取box3到浏览器窗口的偏移量

js 不但提供了offsetLeft、offsetTop方法，还提供了offsetParent（获取上一级定位元素对象）的方法。所以现在我们只需封装一个函数就可以了。

<body>
<style>body { margin:0;  }.box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; position:relative; }.box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hidden; position:relative; }.box3 { width:100px; height:100px; margin:100px; background:#999;}
</style>
<div class="box1"><div class="box2"><div class="box3"></div></div>
</div>
<script>var oBox1 = document.querySelector('.box1');var oBox2 = document.querySelector('.box2');var oBox3 = document.querySelector('.box3');function offset(obj,direction){//将top,left首字母大写,并拼接成offsetTop,offsetLeftvar offsetDir = 'offset'+ direction[0].toUpperCase()+direction.substring(1);var realNum = obj[offsetDir];var positionParent = obj.offsetParent;  //获取上一级定位元素对象while(positionParent != null){realNum += positionParent[offsetDir];positionParent = positionParent.offsetParent;}return realNum;}console.log('box1: '+ offset(oBox1,'left') +','+ offset(oBox1,'top'));console.log('box2: '+ offset(oBox2,'left') +','+ offset(oBox2,'top'));console.log('box3: '+ offset(oBox3,'left') +','+ offset(oBox3,'top'));
</script>
</body>

Ref:
https://blog.csdn.net/w390058785/article/details/80461845

https://www.jianshu.com/p/4e97bffa65bd

https://blog.csdn.net/lzding/article/details/46371609

JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset相关推荐

JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX 原文:https://www.cn ...
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
关于js中的offsetWidth.clientWidth.scrollWidth等一系列属性及其方法一直都傻傻分不清,这里就来总结一下这些方法的用法和含义. 注意: 下面元素属性和元素方法都通过 e ...
JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: 1.width()方法用于获得元素内容所占的宽度: 2.innerWidth()方法用于获得包括内边界(padding)的元素宽度: 算式:innerWidth()=width()+ ...
js获取屏幕尺寸、clientWidth、offsetWidth、scrollWidth等区别
js获取元素/屏幕宽高总结如下 1.获取网页可视区域宽高(随着页面的缩放,所获取的值会相应改变) 方法一.不包括滚动条的宽高在内 document.documentElement.clientWid ...
JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.b ...
四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异...
转自http://blog.163.com/chudaozhe@126/blog/static/1157323432011626112137928/ 网页可见区域宽:document.body.cli ...
各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解
1.clientWidth.offsetWidth.scrollWidth <!DOCTYPE html> <html><head><meta charset ...
JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解
1. 总述在JS 中scrollWidth.scrollHeight.scrollLeft .scrollTop 属性在做一些复杂的交互效果中是非常常用的,因此在本博文中详细的介绍并给出实例. 以上 ...
html offsetwidth 字符串宽度,基于js中style.width与offsetWidth的区别(详解)
作为一个初学者,经常会遇到在获取某一元素的宽度(高度.top值...)时,到底是用 style.width还是offsetWidth的疑惑. 1. 当样式写在行内的时候,如时,用 style.wid ...

JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset

offsetLeft、offsetTop 例子

JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset相关推荐

最新文章

热门文章