易混淆的几种获取尺寸的方法

几种容易混淆的关于尺寸的方法

一、offset家族

offset家族是一套方便的获取元素尺寸的方法；

1、offsetWidth  和  offsetHeight

得到对象的宽度和高度(对象自己的，与他人无关)

offsetWidth =  width  + border  +  padding

例：

div {  width:220px;  border-left:2px solid red; padding:10px;}
div.offsetWidth =  220 + 2 + 20    

2、offsetLeft  和  offsetTop   

返回距离上级盒子（最近的带有定位）左边的位置和顶部位置，如果父级都没有定位则以body 为准

offsetLeft 从父级的padding 开始算，父亲的border 不算

总结一下：  就是子盒子到定位的父盒子边框到边框的距离

offsetLeft  与 style.left 的区别
1、最大区别在于  offsetLeft  可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以 ，只有定位的盒子 才有 left 和 top 

2、offsetLeft返回的是数字，而 style.left返回的是带有单位的字符串。

3、offsetLeft 只读，而 style.left 可读写。

4、如果没有给 HTML 元素指定过 left 样式，则 style.left返回的是空字符串。

5、最重要的区别  style.left 只能得到行内样式，offsetLeft随便都可以

3、offsetParent

返回指定对象的父级 （带有定位）不一定是亲的爸爸，如果父级都没有定位则以body 为准

二、scroll家族

1、scrollTop  和  scrollLeft   被卷去的头部和左部（头部对应纵轴，左部对应横轴）

它就是当你滑动滚轮浏览网页的时候网页隐藏在屏幕上方的距离

但获取scrollTop有点麻烦：

谷歌浏览器 和 没有声明 DTD（怪异模式） ：

document.body.scrollTop;

火狐 和 其他浏览器：

document.documentElement.scrollTop；

ie9+  和 最新浏览器：

window.pageYOffset;

兼容性写法：

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

2、scrollTo(xpos,ypos)方法

xpos 必需，要在窗口文档显示区左上角显示的文档的 x 坐标。

ypos        必需，要在窗口文档显示区左上角显示的文档的 y 坐标。

三、client 家族

clientWidth 和 clientHeight   获取屏幕可视区域宽和高

clientWidth： width  +  padding      不包含border 

ie9及其以上的版本：

window.innerWidth  

标准模式：

document.documentElement.clientWidth

怪异模式 ：

document.body.clientWidth

注：window.screen.width   返回的是我们电脑的 分辨率   跟浏览器没有关系

四、事件对象event几个尺寸属性

普通浏览器支持 event  ie 678 支持 window.event

兼容性写法：

var event = event || window.event; 

1、width 和 height 该窗口或框架的宽度和高度

2、pageX 和 pageY  光标相对于该网页的水平和垂直位置（ie无）

3、screenX 和 screenY  光标相对于该屏幕的水平和垂直位置

4、clientX 和 clientY  光标相对于该网页的当前可见区域水平和垂直位置