offsetWidth,clientWidth的区别

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/tangtang5963/article/details/52172685

偏移量

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高级程序设计》

友情链接：http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html

友情链接：http://blog.csdn.net/piziliweiguang/article/details/7762770