clientWidth clientHeight offsetWidth offsetHeight scrollWidth scrollHeight

clientWidth、clientHeight，指元素的width+padding-滚动条的宽度和高度

来一张图说明一下：

• body的clientWidth为body的width+padding
• body的clientHeight是内容高度，如果没有内容，高度为0
• html的clientWidth为浏览器窗口的宽度，不包括滚动的宽度
• html的clientHeight为浏览器窗口的高度，不包括滚动条的高度

//body的clientWidth为body的width+padding
//body的clientHeight是内容高度，如果没有内容，高度为0
console.log(document.body.clientWidth, document.body.clientHeight);
//html的clientWidth为浏览器窗口的宽度，不包括滚动的宽度
//html的clientHeight为浏览器窗口的高度，不包括滚动条的高度
console.log(document.documentElement.clientWidth, document.documentElement.clientHeight); 

offsetWidth、offsetHeight，元素的width+padding+border，指元素实际占位的大小

来一张图说明一下：

• body 的offsetWidth 和 clientWidth相同，因为border没有边框
• body 的offsetWidth和 offsetHeight相同，因为border没有边框
• html的宽度为浏览器窗口的宽度，不包括滚动的宽度
• html的高度为实际内容高度

//和clientWidth、clientHeight相同
console.log(document.body.offsetWidth, document.body.offsetHeight); 
//html的宽度为浏览器窗口的宽度，不包括滚动的宽度
//html的高度为内容高度
console.log(document.documentElement.offsetWidth, document.documentElement.offsetHeight); 

scrollWidth、scrollHeight，元素的实际width+padding-滚动条的宽度和高度，如果里面的内容有超出，按里面内容的宽度和高度算

来一张图说明一下：

• body 的 scrollWidth 和 scrollHeight 等于实际内容的宽度和高度
• html 的 scrollWidth 和 scrollHeight 等于实际内容的宽度和高度+body 的margin

//实际内容的宽度和高度
console.log(document.body.scrollWidth, document.body.scrollHeight);
//实际内容的宽度和高度+body的margin
console.log(document.documentElement.scrollWidth, document.documentElement
.scrollHeight)

clientLeft clientTop指元素相对自身占位的left top值，就是边框的宽度

来一张图说明一下：

• body 的 clientLeft 和clientTop 都是0，因为body没有边框，如果body有一个10像素的边框，则clientLeft 和clientTop 都是10
• html 的 clientLeft 和clientTop 都是0，因为html没有边框

// 都是0，因为没有border
console.log(document.body.clientLeft, document.body.clientTop)
console.log(document.documentElement.clientLeft, document.documentElement.clientTop)

offsetLeft offsetTop,等同于定位的left和top，如果没有定位，向上寻找到定位的父容器位置，从左上角的位置(从父容器的padding开始)开始算，如果没找到就相对页面定位

来一张图说明一下：

• body的 offsetLeft 和 offsetTop 都是0，offsetLeft最后都是相对的body
• html的 offsetLeft 和 offsetTop 都是0，offsetLeft最后都是相对的body

// 都是0，offsetLeft最后都是相对的body
console.log(document.body.offsetLeft, document.body.offsetTop)
console.log(document.documentElement.offsetLeft, document.documentElement.offsetTop)

scrollLeft scrollTop滚动条位置，可以获取和设置滚动条的位置

来一张图说明一下：

• body.scrollLeft 和 html.scrollLeft 相同
• body.scrollTop和 html.scrollTop相同
• 涉及到兼容问题，使用的时候需要两个都写

可以获取和设置滚动条的位置：

// 滚动条的位置
console.log(document.body.scrollLeft, document.body.scrollTop)
console.log(document.documentElement.scrollLeft, document.documentElement.scrollTop)

 //设置滚动条的位置
document.body.scrollTop = 300;
document.documentElement.scrollTop = 300; //现在使用这个

//获取滚动条的位置
window.addEventListener("scroll",scrollHandler);
function scrollHandler(e){
	var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
	console.log(scrollTop)
}

总结：

• clientWidth、clientHeight，指元素的width+padding-滚动条的宽度和高度
• offsetWidth、offsetHeight，元素的width+padding+border，指元素实际占位的大小
• scrollWidth、scrollHeight，元素的实际width+padding-滚动条的宽度和高度，如果里面的内容有超出，按里面内容的宽度和高度算
• clientLeft clientTop指元素相对自身占位的left top值，就是边框的宽度
• offsetLeft offsetTop,等同于定位的left和top，如果没有定位，向上寻找到定位的父容器位置，从左上角的位置(从父容器的padding开始)开始算，如果没找到就相对页面定位
• scrollLeft scrollTop滚动条位置，可以获取和设置滚动条的位置