JS中的 offset client screen 等值的含义

一、offsetWidth 和 offsetHeight

1. 用法：
元素 . offsetWidth—— 元素的实际宽度，包括边框线
元素 . offsetHeight—— 元素的实际高度，包括边框线
2. 注意：
获取的结果是数字，没有单位。
只能获取，不能设置。

二、offsetLeft 和 offsetTop

1. 用法：
元素 . offsetLeft—— 元素相对最近的定位父元素的左偏移量
元素 . offsetTop—— 元素相对最近的定位父元素的上偏移量
2. 注意：
获取的结果是数字，没有单位。
只能获取，不能设置。

三、offsetParent

元素.offsetParent—— 获取的是离该元素最近的定位的父元素
注意：
1）如果元素自身是固定定位（fixed），则定位父级是null。
2）如果元素自身是非固定定位,并且所有的父元素都没有定位，那么他的offsetParent是body。
3）body的定位父级是null。

四、scrollwidth与scrollHeight

scrollHeight —— 元素的总高度，包括溢出隐藏的部分和页面可视区的部分
scrollWidth —— 元素的总宽度，包括溢出隐藏的部分和页面可视区的部分

五、scrollTop与scrollLeft

scrollTop—— 元素隐藏到上面的距离，也等于滚动条上偏移量
scrollLeft—— 元素隐藏到左面的距离，也等于滚动条左偏移量

六、clientWidth 与 clientHeight：获取可视区域的宽高

// console.log(“可视区域高：”+document.documentElement.clientHeight);
// console.log(“可视区域宽：”+document.documentElement.clientWidth);
// console.log(“body的真实高：”+document.body.clientHeight);
// console.log(“body的真实宽：”+document.body.clientWidth);

七、screen

// //获取屏幕宽和高不包涵任务栏
// console.log(window.screen.availHeight);
// console.log(window.screen.availWidth);
// //获取屏幕的实际宽和高 包涵任务栏
// console.log(window.screen.height);
// console.log(window.screen.width);
// //浏览器上边距和左边距
// console.log(window.screenTop);
// console.log(window.screenLeft);
// //滚动条滑动距
// console.log(window.scrollX);
// console.log(window.scrollY);