DOM三大家族（offset系列 & client系列 & scroll系列）以及其他常用坐标和尺寸属性总结

offset系列

• el.offsetParent
  表示元素中带有最近定位的祖先元素，祖先元素都没有定位则返回body

• el.offsetTop
  表示元素距离其offsetParent上方的偏移

• el.offsetLeft
  表示元素距离其offsetParen左边框的偏移

• el.offsetWidth
  元素实际宽度 左右border+左右padding+width

• el.offsetHeight
  元素实际高度 上下border+上下padding+height
  以上属性返回值不带单位

offset VS style

offset	style
获得的数据没有单位	带单位的字符串
得到任意样式表样式	只获取行内样式
offsetWidth包含三部分	style.width只包含width
offsetWidth只读属性	style.width可以读写

client系列

可以动态获取元素边框大小、元素大小

• el.clientTop
• el.clientLeft
• el.clientWidth
• el.clientHeight

var oDiv = document.querySelector('div');
console.log(oDiv.clientTop); // 返回元素上边框宽度
console.log(oDiv.clientLeft);// 返回元素左边框宽度
console.log(oDiv.clientWidth);// 返回元素宽度 padding+内容宽
console.log(oDiv.clientHeight);// 返回元素高度 padding+内容高 结果不带单位

scroll系列

• el.scrollTop

  被卷去的上侧距离

• el.scrollLeft

• el.scrollWidth
  自身实际宽度 不含边框

• el.scrollHeight
  自身实际高度 不含边框，卷上去的总共高度

// 滚动条发生变化触发
box.addEventListener('scroll',function() {
     console.log(this.scrollTop); // 被卷去的上侧距离
})

鼠标坐标值

var oDiv = document.querySelector('div');
oDiv.onclick = function(e) {
    console.dir(e);
    // 返回鼠标相对于浏览器窗口可视区坐标
    console.log(e.clientX, e.clientY);
    // 返回鼠标相对于电脑屏幕坐标
    console.log(e.screenX, e.screenY);
    // ie9+ 相当于文档页面
    console.log(e.pageX, e.pageY);
}

尺寸属性

Element.clientHeight   // 返回元素节点可见部分的高度
Element.clientWidth   // 返回元素节点可见部分的宽度
Element.clientLeft   // 返回元素节点左边框的宽度
Element.clientTop   // 返回元素节点顶部边框的宽度
Element.scrollHeight  // 返回元素节点的总高度
Element.scrollWidth  // 返回元素节点的总宽度
Element.scrollLeft   // 返回元素节点的水平滚动条向右滚动的像素数值,通过设置这个属性可以改变元素的滚动位置
Element.scrollTop   // 返回元素节点的垂直滚动向下滚动的像素数值
Element.offsetHeight   // 返回元素的垂直高度(包含border,padding)
Element.offsetWidth    // 返回元素的水平宽度(包含border,padding)
Element.offsetLeft    // 返回当前元素左上角相对于Element.offsetParent // 节点的垂直偏移
Element.offsetTop   // 返回水平位移
Element.style  // 返回元素节点的行内样式