document.body body
document.documentElement html
宽高:
元素有多高,就会撑开多少(内容高度) ,宽度是可视宽度
document.body.clientWidth,document.body.clientHeight
获取页面的可视宽高 ,并不会因为内容变大而撑开
document.documentElement.clientWidth,document.documentElement.clientHeight
body的offsetWidth和clientWidth相同
document.body.offsetWidth,document.body.offsetHeight
页面的可视宽度,高度是8 ,有内容,宽度仍然是可视宽度,html的高度是body内容高度+bodyMargin
document.documentElement.offsetWidth,document.documentElement.offsetHeight
没有内容时和body的clientWidth相同,有内容,内容撑开的宽高,和clientHeight相同,内容宽度
document.body.scrollWidth,document.body.scrollHeight
如果body没有高度,则是可视宽高
如果body有宽高,不超过可视宽高,则是可视宽高
如果body的宽高超出可视范围,则是body宽高+margin
document.documentElement.scrollWidth,document.documentElement.scrollHeight
常用:
内容高度
console.log(document.body.clientHeight);
可视宽高 console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)
有滚动条时,内容宽高 console.log(document.body.scrollWidth,document.body.scrollHeight);
位置:
div1的边线(border)宽高
div1.clientLeft,div1.clientTop
没有定位时,相对页面的左上顶角位置
如果定位 相对父容器左上角位置 和css中left,top相同
div1.offsetLeft,div1.offsetTop
元素上的滚动条位置
div1.scrollLeft,div1.scrollTop
getBoundingClientRect()
获取元素的矩形界限范围
var rect=div1.getBoundingClientRect();
console.log(rect);
width, //offsetWidth
height, //offsetHeight
left, //最左边到可视窗口的距离
top, //最顶部到可视窗口的距离
right,//left+width 最右边到可视窗口的距离
bottom,//top+height 最下面到可视窗口的距离
x, //left
y //top
window窗口的滚动条位置获取和设置
document.documentElement.scrollLeft,document.documentElement.scrollTop