scrollWidthclientWidthoffsetWidth的区别及总结

Posted 2021-01-03 tao-jl

它们都是Element的属性，表示元素的宽度。

Element.scrollWidth    内容+内边距+溢出尺寸-----不包括边框和外边距  ==实际内容

Element.offsetWidth  元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件

Element.clientWidth    内容+内边距,-----不包括边框和外边距、滚动条  == 可视内容

总结关于位置信息的方法和属性

页可见区域宽： document.body.clientWidth;
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth （包含边线的宽、滚动条）;
网页可见区域高： document.body.offsetHeight
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;

屏幕辨别率的高： window.screen.height;
屏幕辨别率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;

 

以下是详细的说明。

Element

Element.offsetParent：是一个只读属性，返回一个指向最近的包含该元素的定位元素
Element.offsetTop：为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离。
Element.offsetLeft：    子元素的border与父元素border的距离 是数值
Element.offsetWidth ：元素的宽度（内容+内边距+边框+滚动条）===整体，实际
Element.offsetHeight：是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

 

Element.getClientRects() 方法返回一个指向客户端中每一个盒子的边界矩形的矩形集合，包含left、top、right和bottom属性

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。支持浮点数

 

Element.ClientTop：一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距
Element.ClientLeft：表示一个元素的左边框的宽度，以像素，包括滚动条，不包括左外边距和左内边距
Element.ClientWidth：表示元素的内部宽度，以像素计，包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。
Element.ClientHeight：它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算

 

Element.ScrollTop：获取或设置一个元素的内容垂直滚动的像素数（值为0即最顶部/不能被滚动）
Element.ScrollLeft：读取或设置元素滚动条到元素左边的距离（它>元素内容最大宽度，它就是元素最大宽度），是整数
Element.ScrollWidth：内容+内边距+溢出尺寸-----不包括边框和外边距  ==实际内容
Element.ScrollHeight：一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

 

window

window.screen.width：返回屏幕的宽度。（屏幕的分辨率）

window.screen.height：返回屏幕的高度（屏幕的分辨率）

window.screen.Top:返回当前屏幕顶部的距离（以像素为单位）

window.screen.availWidth：屏幕可用宽度（屏幕最大宽度），包括滚动条+标题栏，（以像素为单位）
window.screen.availHeight：屏幕可用高度

非标准

window.screen.availLeft:返回屏幕左侧可用的第一个可用像素。

window.screen.availTop:指定未分配给永久或半永久用户界面功能的第一个像素的y坐标。

window.screen.Top:返回当前屏幕顶部的距离（以像素为单位）

window.screen.Left：返回从主屏幕左侧到当前屏幕左侧的距离（以像素为单位）。

 

 

window.screenX：只读属性返回的水平距离

window.screenY：只读属性返回的垂直距离

window.scrollX：返回文档当前水平滚动的像素数，pageXoffset属性是它的别名（兼容性更好）

window.scrollY：返回文档当前垂直滚动的像素数

 

window.innerWidth：浏览器视口宽度，包括滚动条，像素单位

window.innerHeight：浏览器视口高度，包括滚动条，像素单位

window.outerWidth：整个浏览器窗口宽度，全部

window.outerHeight：整个浏览器窗口高度，全部

 

Event

event.clientX：客户区域内的水平坐标

event.clientY：客户区域内的垂直坐标

event.scrollX：鼠标指针在屏幕坐标中的水平坐标

event.scrollY：鼠标指针在屏幕坐标中的垂直坐标

event.pageX：返回相对于整个文档的左边缘单击鼠标的X（水平）坐标，包括当前不可见的文档的任何部分

非标准非IE支持的

event.offsetX ：鼠标指针在该事件与目标节点的填充边缘之间的X坐标中的偏移量。 

event.offsetY：鼠标指针在该事件与目标节点的填充边缘之间的Y坐标中的偏移量。 

 

参考的资料

https://www.cnblogs.com/shubiao/p/4954848.html 

https://www.cnblogs.com/yeminglong/p/6158699.html 

https://www.cnblogs.com/kwhei/p/5683847.html

https://developer.mozilla.org/en-US/docs/Web