Fork me on GitHub

窗口和元素的大小: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 Code

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 

 

 

posted @ 2014-04-13 14:56  萝卜丝小童鞋  阅读(1071)  评论(3编辑  收藏  举报