窗口和元素的大小：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;
}
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
};
}
}
3、滚动大小（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
