以下属性必须保证DOM已经添加在页面中，如果没有添加则无法调用 client(客户) offset(偏移) scroll(滚动条) 宽 clientWidth offsetWidth scrollWidth 高 clientHeight offsetHeight scrollHeight
client(客户) offset(偏移 scroll(滚动条) 位 clientLeft offsetLeft scrollLeft 置 clientTop offsetTop scrollTopoffset包括border：height+border+padding client不包括border：width+padding
元素的宽高： 元素 无滚动条 div.clientWidth,div.clientHeight//宽高+padding div.offsetWidth,div.offsetHeight//宽高+padding+border div.scrollWidth,div.scrollHeight//宽高+padding
元素 有滚动条 div.clientWidth,div.clientHeight//宽高+padding-滚动条宽高 div.offsetWidth,div.offsetHeight//宽高+padding+border div.scrollWidth,div.scrollHeight//实际内容的宽高+padding
（body和html）无滚动条 document.body.clientWidth,document.body.clientHeight//当前页面body的宽度，是html标签-两个8px的margin， body因为开始没有内容时，高度为0，如果有内容被撑开，高度即为内容高度 document.documentElement.clientWidth,document.documentElement.clientHeight//当前页面的宽高，和页面内容无关，是当前文档显示区域的宽高 document.body.offsetWidth,document.body.offsetHeight//宽高和client document.documentElement.offsetWidth,document.documentElement.offsetHeight//宽度和client一样，但是高度是当前内容高度 document.body.scrollWidth,document.body.scrollHeight//与client相同 document.documentElement.scrollWidth,document.documentElement.scrollHeight//与client相同
（body和html）有滚动条 document.body.clientWidth,document.body.clientHeight//当前页面body的宽度，是html标签-两个8px的margin， body因为开始没有内容时，高度为0，如果有内容被撑开，高度即为内容高度 document.documentElement.clientWidth,document.documentElement.clientHeight//当前页面的宽高，和页面内容无关，是当前文档显示区域的宽高 document.body.offsetWidth,document.body.offsetHeight//宽高和client document.documentElement.offsetWidth,document.documentElement.offsetHeight 宽度是Body的offsetWidth+margin(82)， 高度是Body的OffsetHeight+margin(82) document.body.scrollWidth,document.body.scrollHeight);//与client相同 document.documentElement.scrollWidth,document.documentElement.scrollHeight//宽度与client相同，高度，如果内容的高度小于可是窗口高度，则为可是窗口高度，如果大于可视窗口高度，则为内容高度
元素的位置： 无定位 div1.clientLeft,div1.clientTop//边线粗细 div1.offsetLeft,div1.offsetTop//相对视口坐标
有定位（父级有定位，父级无定位） div1.clientLeft,div1.clientTop//边线粗细 div1.offsetLeft,div1.offsetTop//相对父元素的坐标
有滚动条的 只有这个可以设置改变 div2.scrollLeft,div2.scrollTop); div2.scrollTop=100;//指的是视口顶部距离实际内容大小的顶部距离 div2.scrollLeft=50; //指的是视口左边距离实际内容大小的左边距离
body和html的scroll位置 过去谷歌浏览器中获取设置的是body的scroll,现在都使用html的scroll
直接设置是不能改变 document.body.scrollTop=100; document.documentElement.scrollTop=100;
交互后可以改变 document.οnclick=function(){ document.documentElement.scrollTop=100; }
console.log(document.documentElement.scrollTop);//获取滚动位置
document.οnscrοll=function(){ var rect=div2.getBoundingClientRect() console.log(rect); } getBoudingClientRect( )- 该方法返回元素的大小及其相对于视口的位置 right是左边距视口的距离加宽度 bottom是上边距视口的距离加高度 如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。
