2018-01-06

javascript中常用坐标属性offset、scroll、client介绍

工作中javascript的offset、client、scroll三大家族在使用过程中非常频繁，接下来将对此进行一一介绍，需要了解的朋友可以参考下

offset家族

offset:偏移，补偿，位移的意思偏移的距离
offsetHeight和offsetWidth: 可以检测盒子的宽高，包括宽高本身，padding，border。不包括margin
offsetHeight = height+padding+border;(不加margin)
offsetWidth = width+padding+border;(不加margin)

offset..和style.. 区别

最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。如果父系盒子中都没有定位，以body为准。style.left只能获取行内式，如果没有返回“”;
offsetTop 返回的是数字，而 style.top 返回的是字符串，XXpx
offsetTop 只读，而 style.top 可读写。
如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串

示例代码

<div id='box'></div>
let oBox = document.getElementById('box');
oBox.offsetTop 指 oBox元素距离上方或父级的位置，整型，单位像素。
oBox.offsetLeft 指 oBox元素 距离左方或父级的位置，整型，单位像素。
oBox.offsetWidth 指 oBox元素自身的宽度，整型，单位像素。
oBox.offsetHeight 指 oBox元素自身的高度，整型，单位像素。

client家族

client:可视区、客户端
clientWidth获取网页可视区域宽度（两种用法）
clientHeight 获取网页可视区域高度（两种用法）
调用者不同，意义不同：盒子调用：指盒子本身。body/html调用：可视区域大小，浏览器的可视区域除了IE以外的所有浏览器都将此信息保存在window对象中

示例代码

获取窗口宽度

if (window.innerWidth{
    winWidth = window.innerWidth;
} else{
    winWidth = document.body.clientWidth || document.documentElement.clientHeight;
}

获取窗口高度

if (window.innerHeight){
    winHeight = window.innerHeight;
}else{
    winHeight = document.body.clientHeight || document.documentElement.clientWidth;
}

上述是考虑浏览器的兼容性的写法，可以直接使用

scroll家族

scroll:卷页，卷曲
scrollWidth/scrollHeight 盒子内容的宽高,不包括border和margin,如果有内容超出了，显示内容的高度
scrollTop和scrollLeft 被卷去的左侧和头部（浏览器无法显示的左/头部）

示例代码

1
2

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

上述是考虑浏览器的兼容性的写法，可以直接使用