offsetWidth,clientWidth的区别

全栈程序员-站长 • 2022年7月22日下午4:16 • 未分类 • 阅读 5

大家好，又见面了，我是你们的朋友全栈君。

偏移量

offsetWidth
元素在水平方向上占用的空间大小

包括元素的宽度、可见的垂直滚动条宽度、左边框高度和右边框高度

offsetWidth=width+padding+border

offsetHeight 元素在垂直方向上占用的空间大小

包括元素的高度、可见的水平滚动条宽度、上边框高度和下边框高度

offsetHeight=height+padding+border

offsetLeft 元素的左外边框至包含元素的左内边框之间的像素距离

offsetTop 元素的上外边框至包含元素的上内边框之间的像素距离

客户区大小

clientWidth ：可见区域的宽度；clientWidth=width+padding

clientHeight：可见区域的高度；clientHeight=width+padding

对象距离左侧和顶部的距离 offsetLeft，offsetTop

对象可视区域的宽度和高度 clientWidth，clientHeight clientWidth=width+padding

对象滚动宽度和高度 scrollWidth，scrollHeight （对象的实际内容的宽度，不包边线宽度）

对象左侧和顶部滚动的距离 scrollLeft，scrollTop

滚动大小

scrollWidth：没有滚动条的情况下，元素内容的总宽度；

scrollHeight：没有滚动条的情况下，元素内容的总高度；

scrollLeft :
被隐藏在内容区域左侧的像素距离

scrollTop :被隐藏在内容区域顶部的像素距离

网页可见区域宽： 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.screenTop;
网页正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;

屏幕可用工作区高度：window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

参考文献：《javascript高级程序设计》

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/163049.html原文链接：https://javaforall.net