窗口和元素的大小：offset client scroll
1、偏移量（offset）只讀
offsetHeight:元素垂直方向上占用的空間大小。包括元素內容區高度、元素上下內邊距、（可見的）水平滾動條高度、上下邊框高度
offsetWidth:元素水平方向上占用的空間大小。包括元素內容區寬度、元素左右內邊距、（可見的）垂直滾動條寬度、左右邊框寬度
offsetLeft:元素左外邊框到包含元素左內邊框之間的距離
offsetTop:元素上外邊框到包含元素上內邊框之間的距離
獲取某個元素在頁面上的偏移量
function getElementLeft(element){var actualLeft=element.offsetLeft;var current=element.offsetParent;while(current!=null){actualLeft+=current.offsetLeft;current=current.offsetParent;}return actualLeft; } function getElementLeft(element){var actualTop=element.offsetTop;var current=element.offsetParent;while(current!=null){actualTop+=current.offsetTop;current=current.offsetParent;}return actualTop; } View Code?2、客戶區大小（client）只讀
都不包括邊框
clientHeight:元素內容區高度(height)+元素上下內邊距高度(paddingTop+paddingBottom)-可見的水平滾動條高度
clientWidth：元素內容區寬度(width)+元素左右內邊距寬度(paddingLeft+paddingRight)-可見的垂直滾動條寬度
FF下textarea元素的clientWidth和clientHeight不包括元素的內邊距
獲取瀏覽器視口(viewport)大小
function getViewport(){if(document.compatMode=='CSS1Compat') {return{height:document.documentElement.clientHeight,width:document.documentElement.clientWidth};}else{return{height:document.body.clientHeight,width:document.body.clientWidth};} } View Code3、滾動大小（scroll）
<div id='divP' style="height: 100px;width: 500px; padding:5px;margin: 10px; border: 1px solid #ccc;overflow: scroll"><div id='divS' style="height: 200px; width: 600px;padding:4px;margin:9px;border:2px solid"></div> </div>divS可見區域高度=height+上下padding+上下border=212px
divS可見區域寬度=width+左右padding+左右border=612px
var divPScrollHeight=document.getElementById('divP').scrollHeight
var divPScrollWidth=document.getElementById('divP').scrollWidth
chrome/opera: divPScrollHeight=divS可見區域高度+divS上下margin+divP上下padding//240px
FF/IE7+: divPScrollHeight=divS可見區域高度+divS上下margin+diaP上padding//235px(不包括下內邊距)
chrome/opera/FF/IE8+: divPScrollWidth=divS可見區域寬度+divSmarginLeft+divPpaddingLeft//626px（不包括右內邊距和子元素的右外邊距）
IE7: ?divPScrollWidth=divS可見區域寬度+divS左右margin+divP左右padding//640px
?
下面是閑來無事測試了一下其他元素撐開body的情況，并且意外發現div和textarea撐開body不同瀏覽器是有點區別的
div撐開body
<body>//默認margin=8px<div id='div' style="height: 1100px; width:1500px;padding:5px;margin: 10px;border: 1px solid #ccc;"></div> </body>body默認maring=8px;如果div的margin大于body的margin，則margin為div的margin，否則為body的margin
div可見區域高度=height+paddingTop+paddingBottom+borderTop+borderBottom//1112px
div可見區域寬度=width+paddingLeft+paddingRight+borderLeft+borderRight//1512px
document.documentElement.scrollHeight=div可見區域高度+（div/body）marginTop+(div/body)marginBottom//1132px
document.documentElement.scrollWidth=div可見區域寬度+（div）marginLeft+（body）marginLeft//1530px
chrome/opera: document.body.scrollHeight=document.documentElement.scrollHeight//1132px
chrome/opera: document.body.scrollWidth=document.documentElement.scrollWidth//1530px
FF/IE: document.body.scrollHeight=div可見區域高度//1112px
FF/IE: document.body.scrollWidth=div可見區域寬度+(div)marginLeft//1522px
textarea撐開body
<body>//默認margin=8px<textarea id='textarea' style="height: 1100px; width:1500px;padding:5px;margin: 10px;border: 1px solid #ccc;"></textarea> </body>textarea可見區域高度=height+paddingTop+paddingBottom+borderTop+borderBottom//1112px
textarea可見區域寬度=width+paddingLeft+paddingRight+borderLeft+borderRight//1512px
var dESHeight=document.documentElement.scrollHeight
chrome/opera: dESHeight=textarea可見區域高度+(textarea)上下margin+（body）上下margin+3//1151px
FF: dESHeight=textarea可見區域高度+(textarea)上下margin+（body）上下margin+1//1149px
?IE8+: dESHeight=textarea可見區域高度+(textarea)上下margin+（body）上下margin//1148px
(IE7body默認上下margin=15px左右margin=10px)
IE7: dESHeight=textarea可見區域高度+(textarea)上下margin+（body）上下margin+2//1164px
document.documentElement.scrollWidth
document.documentElement.scrollWidth=textarea可見區域寬度+（textarea）左右margin+（body）marginLeft//1540px(注：IE7為1142px因為ie7body默認左右margin=10px)
var bSHeight=document.body.scrollHeight
chorme/opera: bSHeight=document.documentElement.scrollHeight//1151px
chrome/opera: bSHeight=document.documentElment.scrollWidth//1540px
FF: bSHeight=textarea可見區域高度+（textarea）上下margin+1//1133px
IE8+: ?bSHeight=textarea可見區域高度+（textarea）上下margin//1132px
IE7: ?bSHeight=textarea可見區域高度+（textarea）上下margin+2//1134px
var bSWidth=document.body.scrollWidth
chorme/opera: bSWidth=docuemnt.documentElement.scrollWidth//1540px
FF: bSWidth=textarea可見區域寬度+（textarea）marginLeft//1522px
IE7+: ?bSWidth=textarea可見區域寬度+（textarea）左右margin//1532px
終上所述：在textarea撐開body的情況下，scrollHeight在chrome/opera有3px差，FF有1px差，IE7有2px差
并且由于瀏覽器body有默認的margin值，這樣會影響我們獲取的scrollWidth和scrollHeight，所以最好將body的margin設置為0
?
這個周末測試這些現在頭都大了，暈暈乎乎的，有什么錯誤麻煩指點一下。待后期清醒一點會再更新一下。
?
轉載請注明出處：http://www.cnblogs.com/miss-radish/p/3661371.html?
?
?
轉載于:https://www.cnblogs.com/miss-radish/p/3661371.html
總結
以上是生活随笔為你收集整理的窗口和元素的大小：offset client scroll的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 查看tomcat启动文件都干点啥---s
- 下一篇： JUnit 3一个例子就懂