前端女娲补天 CSS（二） 怎么判断元素是否在可视区，offsetWidth和style.width的区别，元素有哪些宽高属性

怎么判断元素在可视区内

要让元素出现在可视区内，就要让它的位置在浏览器导航栏下面，浏览器下边界上面。
换句话说，元素的上边界必须低于视口上边界，元素的下边界必须高于视口的下边界。
那么判断的条件就是：
当前元素距离视口上边界高度getBoundingClientRect().top <= 视口高度screen.availHeight - 元素自身高度 offsetHight
&&
当前元素距离视口上边界高度getBoundingClientRect().top >= 0

简言之，就是距离上边界高度大于0，小于视口高度 - 元素高度

---

offsetWidth和style.width的区别

offsetWidth是padding + border + width(也就是content的宽) + scrollY（如果有），style.width就是width.
offsetWidth的属性可读，style.width可读写。
offsetWidth返回整数，style.width返回字符串，附带单位。
style.width只能返回style内部定义的样式。

---

所有元素宽高等属性

• offsetHeight:元素height + padding + border + scrollX（如果有）的高度
• offsetLeft:元素左边界到其（最近定位）父元素左边界的偏移量，长度中不包括二者边框
  没有offsetRight（scroll，client也是）
• offsetTop:元素上边界到其（最近定位）父元素上边界的偏移量
• scrollHeight: 滚动条完整高度
• scrollWidth:滚动条完整宽度
• scrollTop:已滚动过上边界的像素数
• scrollLeft:已滚动过左边界的像素数
• clientWidth:元素padding + width的宽度
• clientLeft: border-left
• event.clientX 鼠标相对于浏览器左上角的坐标X
• event.clientY 鼠标相对于浏览器左上角的坐标Y
• event.offsetX 鼠标相对于事件源左上角的坐标X
• event.offsetY 鼠标相对于事件源左上角的坐标Y
• event.clientX 鼠标相对于显示器左上角的坐标X
• event.clientY 鼠标相对于显示器左上角的坐标Y
• document.documentElement.scrollTop 垂直方向滚动的值
• event.clientX+document.documentElement.scrollTop
  鼠标相对于浏览器左上角的坐标+垂直方向滚动的量