JS中的宽高和位置

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

JS中的宽高和位置

原文：https://www.cnblogs.com/GHssda/p/12641589.html