北京治疗白癜风到什么医院好 https://yyk.39.net/bj/zhuanke/89ac7.html
元素偏移量offset系列
offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态地得到该元素的位置（偏移）、大小等。
获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）返回的数值都不带单位
offset系列常用的属性
offset可以得到任意样式表中的样式值，获得的数值是没有单位的，offsetWidth包含padding+border+width，offsetWidth等属性是只读属性，只能获取不能赋值
所以通常用来获取元素的大小和位置，做一些可以拖动的盒子
例如模态框效果：
拖动的模态框拖动的代码当我们鼠标按下，就获得鼠标在盒子内的坐标鼠标移动的时候，把鼠标在页面中的坐标，减去鼠标在盒子内的坐标就是模态框的left和top值鼠标弹起，就让鼠标移动事件移除例如放大镜效果：
商城放大镜效果1.当我们鼠标经过preview_img图片就显示和隐藏mask黄色遮挡层和big左边大盒子
鼠标经过xians2.鼠标移动的时候，让黄色的盒子跟着鼠标来走
黄色盒子移动3.算出左边大图的移动距离(大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离)
大图跟着yid元素可视区client系列
client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态地得到该元素的边框大小、元素大小等。
client系列属性client宽度和我们offsetWidth最大的区别就是不包含边框，他们的用法基本相似
元素滚动scroll系列
scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态地得到该元素的大小、滚动距离等。
scroll属性如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件。
滚动例如在很多网站都会有返回顶部按钮，向下滚动一定的距离后按钮出现，上滑一定的距离后按钮又消失，当点击按钮后能够返回顶部的效果
返回顶部按钮回到顶部首先要获取元素，并且拿到所有参与交互的各个位置元素的顶部偏移量offsetTop，右侧边栏sliderbar在被滚动遮挡后会变成固定定位，点击返回头部按钮，会回到header的顶部偏移量
获取元素发生页面滚动事件(scroll)页面滚动到banner区头部右侧边栏sliderbar会变成固定定位，滚动到main主体时goback按钮会出现
当点击goback按钮后会返回头部区域，此时让页面的头部偏移量等于文档scrollTop或者让scrollTop等于0实现返回顶部
点击返回顶部三个系列的区别：
区别offset系列经常用于获得元素位置offsetLeftoffsetTopclient经常用于获取元素大小clientWidthclientHeightscroll经常用于获取滚动距离scrollTopscrollLeft注意页面滚动的距离通过window.pageXOffset获得
