dom之高级补充（offset系列，scroll,client）

offset系列

1. offsetWidth和offsetHeight
   用来得到对象的大小

offsetHeight和style.height的区别

demo.style.height只能获取行内样式，如果样式写到了其他地方，甚至根本就没写，便无法获取
style.height是字符串（而且带单位），offsetHeight是数值
demo.style.height可以设置行内样式，offsetHeight是只读属性
因此，一般用demo.offsetHeight来获取某元素的真实宽度/高度，用style.height来设置宽度/高度

@offsetHeight的构成
offsetHeight = height+padding+border
包括 自身高度 内边距 边框 不包括 外边距

1.1.2. offsetLeft和offsetTop
用来得到对象的位置（注意：没有offsetRight和offsetBottom）
@offsetLeft的构成
到距离自身最近的（带有定位的）父元素的 左侧/顶部 的距离
如果所有父级都没有定位则以body 为准
offsetLeft 是自身border左侧到父级padding左侧的距离

@offsetLeft和style.left的区别
一、style.left只能获取行内样式
二、offsetLeft只读，style.left可读可写
三、offsetLeft是数值，style.left是字符串并且有单位px
四、如果没有加定位，style.left获取的数值可能是无效的
五、最大区别在于offsetLeft以border左上角为基准，style.left以margin左上角为基准

行内设置
left:20px; margin:20px;

标签.offsetParent – 表示某个标签外面定位的父盒子（不一定是父节点，也可能是爷爷）
注意区分offsetParent和parentNode

console.log(box2.offserParent)//可能是定位的干爹，最近的一个定位的父元素
console.log(box2.parentNode)//一定是亲爹

所有的属性都是只读属性，获取结果是数值类型。

scroll系列

@scrollHeight和scrollWidth
标签内部实际内容的高度/宽度
不计算边框，如果内容不超出盒子，值为盒子的宽高（不带边框）
如果内容超出了盒子，就是从顶部或左部边框内侧一直到内容的最外部分
@scrollTop和scrollLeft
被卷去部分的 顶部/左侧 到可视区域 顶部/左侧 的距离

页面滚动座标
1.获取页面滚动座标
页面滚动座标非常常用，但是有很大的兼容性问题，可以合写为

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

2.封装自己的scroll()
由于非常常用，每次都写上面那一大堆很麻烦。我们可以模仿JQuery封装一个自己的scroll()方法，返回页面滚动座标

function scroll(){    return {        scrollTop : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,        scrollLeft : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0    }}

3.固定导航案例

当页面向下滚动的时候 进行判断 如果页面向上走的距离 大于导航栏到页面顶部的距离时 将导航栏的定位改为固定定位
小问题：当导航栏改为固定定位的一瞬间，后面的元素会塌陷。解决方案：给下面的元素添加数值为导航栏高度的padding-top

client系列
1.clientWidth和clientHeight：
偏移offsetWidth: width + padding + border
卷曲scrollWidth: width + padding 不包含border 内部内容的大小
可视clientWidth: width + padding 不包含border

2.clientTop和clientLeft
clientTop和clientLeft没用
他们就是borderTop和borderLeft（如果有滚动条会包含滚动条的宽度，但谁见过滚动条在顶部或者左侧的？！）

网页可视区宽高
1.网页可视区宽高的兼容写法
页面可视区宽高非常常用，但是有很大的兼容性问题，可以合写为

var clientWidth = window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth|| 0;

2.封装自己的client()

由于非常常用，我们可以模仿JQuery封装一个自己的client()方法，返回可视区宽度和高度

function client(){    return clientWidth : window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth|| 0,    clientHeight = window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight|| 0;}

3.体会响应式布局原理
当我们的页面宽度 大于 960 像素的时候 页面为红色并显示computer
当我们的页面宽度 大于 640 小于 960 页面为绿色并显示tablet
剩下的页面为蓝色并显示mobile

三大系列总结

offsetWidth     scrollWidth    clientWidthoffsetHeight    scrollHeight    clientHeightoffsetLeft      scrollLeft      clientLeftoffsetTop       scrollTop       clientTopoffsetParent    scroll()        client()//offsetWidth=padding+border+内容//scrollWidth=border