let divDom = document.querySelector('div')
width 只是content的宽度
console.log( window.getComputedStyle(divDom,null).width )
offsetWidth = content 宽度 + 左右的padding + 左右的border
console.log( divDom.offsetWidth );
console.log( divDom.offsetHeight ); clientWidth = content 宽度 + 左右的padding
console.log( divDom.clientWidth );
console.log( divDom.clientHeight );
在正常文档流下 offsetLeft（13） = body的margin-left（8） + divDom的margin-left（5）
脱离文档流的情况下 offsetLeft（25） = divDom的left（20） + divDom的margin-left（5）
console.log(divDom.offsetLeft);
在正常文档流下 offsetTop（8） = body的margin-top（8）
脱离文档流的情况下 offsetTop（15） = divDom的top（10） + divDom的margin-left（5）
console.log(divDom.offsetTop);
offsetParent 自己相对于谁（父元素）偏移
console.log( divDom.offsetParent ); => body
let c = document.getElementsByClassName('c')[0];
c是绝对定位 是相对于divDom偏移的 所以他的偏移父元素是divDom
console.log( c.offsetParent ); =>divDom
offsetParent 如果子元素的父元素是已经定位（relative,absolute,fixed）的元素,
那么他的offsetParent就是已经定位的父元素
如果不是已经定位的元素，那么他的offsetParent就是body
function getScroll(){
获取滚动条距离顶部的高度
console.log( document.documentElement.scrollTop );
}
滚动条 滚动事件
document.onscroll = function (){
console.log( document.documentElement.scrollTop );
}
通过style在行内样式上获取样式
使用style获取样式 写的什么 就能获取到什么
不会转成rgb 和 出现其他的样式
let div = document.querySelector('div');
console.log('style',div.style.color )
console.log('style',div.style.background )
style是获取不到在内部样式上或者外部样式上的样式的
console.log( div.style.color )
font-size js中要是用驼峰的方式获取
console.log( div.style.fontSize )
使用window.getComputedStyle可以获取行内、内部、外部的所有样式
但是 获得color是rbg格式的，获取的background是所有属性
