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

转载于:https://www.cnblogs.com/miss-radish/p/3661371.html

窗口和元素的大小：offset client scroll相关推荐

offset/client/scroll一些总结
offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...
Web APIs介绍（四）——offset/client/scroll/轮播图/本地存储
1.1. 元素偏移量 offset 系列 1.1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距 ...
三大系列总结(offset client scroll)
元素偏移量offset offset概述获得元素距离带有定位父元素的位置如果子元素没有父亲或者父元素没有定位,则以body为准获得元素自身的大小(包含padding+border+width) ...
offset client scroll
页面中所有标签都是元素(element),html标签是根元素,元素可看出是对象页面中所有内容都是节点(node),所以标签.属性.文本都是节点,而文本包括文字回车换行空格在DOM对象上有个 pr ...
.net label在父容器中占两行显示_十分钟快速了解 JS 中的 offset、scroll、client
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
extjs中滚动条属性_十分钟快速了解 JS 中的 offset、scroll、client
(给前端大全加星标,提升前端技能) 作者:前端下午茶公号 / SHERlocked93 在下开发中经常碰到 offset.scroll.client 这几个关键字,比如 offsetLeft.of ...
javascript获取屏幕、窗口、元素等的大小
javascript获取屏幕.窗口.元素等的大小一. 屏幕大小什么是屏幕大小?屏幕大小是指当前所用设备的屏幕的分辨率(浏览器窗口外部显示器的大小),它一般是不变的.它们可以通过javaScri ...
父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
发现父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...
JS学习之BOM | client | scroll
元素可视区Client系列 client就是客户端,使用client系列的相关属性来获取元素可视区的相关信息,通过client系列的相关属性可以动态的得到该元素的边框大小.元素大小等 client系列 ...

窗口和元素的大小：offset client scroll

窗口和元素的大小：offset client scroll相关推荐

最新文章

热门文章