js中的元素offset，client，scroll

一、元素偏移量offset

使用offset可以动态的得到该元素的位置，大小

获得元素距离带有定位父元素的位置，如果没有父亲或者父亲没有定位，则以body为准获得元素自身的大小（宽度和高度）注意：返回的数值都不带单位，需要自己添加 + ‘px’

offset系列常用属性

offset系列属性作用element.offsetParent返回作为该元素带有定位的父级，如果父级都没有定位，则返回bodyelement.offsetTop返回元素到带有定位父元素上方的距离element.offsetLeft返回元素到带有定位父元素左边框的距离element.offsetWidth返回自身包括padding、边框、内容区的宽度，返回数值不带单位element.offsetHeight返回自身包括padding、边框、内容区的高度，返回数值不带单位 <div class="fatlher"> <div class="son"></div> </div> <script> var son = document.querySelector('.son'); // 同样可以获得父元素 offsetParent 与 parentNode 的区别 console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位 </script>

offset与style区别

offsetstyleoffset可以得到任意样式表中的样式值style只能得到行内样式表的样式值offset系列获得的数值是没有单位的style.width获得的是带有单位的字符串offsetWIdth包含padding+border+widthstyle.width获得不包含padding和border的值offsetWidth等属性是只读属性，只能获取不能赋值style.width是可读写属性，可以获取也可以赋值所以，我们想要获取元素大小位置，用offset更合适所以，我么想要给元素更改值，则需要用style改变

二、元素可视区client

通过client系列的相关属性可以动态的得到该元素边框的大小，元素大小等

client系列属性作用element.clientTop返回元素上边框的大小element.clientLeft返回元素左边框的大小element.clientWidth返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位element.clientHeight返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

淘宝flexible.js部分源码分析

<script> var docEl = document.documentElement; console.log(docEl); function setRemUnit(){ var rem = docEl.clientWidth / 10; docEl.style.fontSize = rem + 'px'; } setRemUnit(); // 当我们页面尺寸大小发生变化的时候，要重新设置下rem的大小 window.addEventListener('resize', setRemUnit); //pageshow 是我们重新加载页面触发的事件 window.addEventListener('pageshow', function(e){ //e.persisted 返回的是true就是说如果这个页面是从缓存取过来的页面，也需要重新计算一下rem的大小 if(e.persisted){ setRemUnit(); } }) </script>

下面三种情况都会刷新页面都会触发load事件

a标签的超链接F5或者刷新按钮（强制刷新）前进后退按钮

但是 火狐中有个特点，有个“往返缓存” ， 这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。

所以此时后退按钮不能刷新页面

此时可以使用pageshow事件来触发，这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加

三、元素scroll系列属性

1、元素scroll系列属性 使用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等

scroll系列属性作用element.scrollTop返回被卷去的上侧距离，返回数值不带单位element.scrollLeft返回被卷去的左侧距离，返回数值不带单位element.scrollWideth返回自身实际的宽度，不含边框，返回数值不带单位element.scrollHeight返回自身实际的高度，不含边框，返回数值不带单位

2、页面被卷去的头部 如果浏览器的高度（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件

案例分析

需要用到页面滚动事件scroll因为是页面滚动，所以事件源是document滚动到某个位置，就是判断页面被卷去的上部值页面被卷去的头部：可以通过window.pageYOffset获得，如果是被卷去的左侧window.pageXOffset注意，元素被卷去的头部是 element.scrollTop，如果是页面被卷去的头部则是window.pageYOffset

3、网页被卷去的头部兼容性解决方案

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

声明了DTD，使用document.documentElement.scrollTop未声明DTD，使用document.body.scrollTop新方法window.pageYOffset 和 window.pageXOffset，IE9支持 function getScroll(){ return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0, top:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; } // 使用的时候 getScroll().left

四、三大系列总结

三大系列大小对比作用element.offsetWidth返回自身包括padding、边框、内容区的宽度，返回数值不带单位element.clientWidth返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位element.scrollWidth返回自身实际的宽度，不含边框，返回数值不带单位

他们的主要用法

offset系列经常用于获得元素位置 offsetLeft offsetTopclient经常用于获取元素大小 clientWidth clientHeightscroll经常用于获取滚动距离 scrollTop scrollLeft注意页面滚动的距离通过window.pageXOffset 获得