DOM常见属性

DOM常见属性

以下属性必须保证DOM已经添加在页面中，如果没有添加则无法调用
client(客户) offset(偏移) scroll(滚动条)
宽 clientWidth offsetWidth scrollWidth
高 clientHeight offsetHeight scrollHeight

	 client(客户) offset(偏移 scroll(滚动条)
位    clientLeft offsetLeft scrollLeft
置    clientTop  offsetTop  scrollTop

offset包括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的总和。