js的位置属性，js判断宽高的属性，offsetLeft、scrollWidth，scrollTop、clientWidth等位置属性yong、对比及兼容性（内有图示参考）

图示

1.offsetLeft和offsetTop

用法：document.documentElement.offsetLeft
含义：

• 一个不为fixed定位的子级，和其不为static定位的父级的左边距离和上方距离；
• 或者为fixed定位子级与视口左边距离和上方距离；
• 或者为static定位父级的子级与视口左边距离和上方距离。

兼容性：

2.clientWidth和clientHeight

用法：document.documentElement.clientWidth
含义：视口宽高
兼容性：

3.scrollTop和scrollLeft

用法：document.documentElement.scrollTop
含义：视口到滚动页面上方和左方距离
兼容性：

4.scrollWidth和scrollHeight

用法：document.documentElement.scrollWidth
含义：滚动页面宽高
兼容性：

5.innerHeight/innerWidth和outerHeight/outerWidth

用法：innerHeight
含义：

• 视口宽高、视口加滚动栏宽高
• innerHeight/innerWidth与clientWidth和clientHeight获取结果一样（⭐但兼容性clientWidth和clientHeight更好）
• outerHeight/outerWidth是innerHeight/innerWidth加上工具栏滚动条宽高

兼容性：

2.offsetWidth和offsetHeight

用法：document.documentElement.offsetWidth
含义：

• content-box: offsetWidth = width + padding * 2+border * 2
• border-box: offsetWidth = width
  兼容性：
  

6.event.clientX、event.clientY、event.pageX、event.pageY

用法：event.clientX（event为function的默认事件参数）
含义：

• clientX、clientY：当鼠标事件发生时（不管是onclick，还是onmousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴y轴的位置；
• pageX、pageY：当鼠标事件发生时（不管是onclick，还是onmousemove，onmouseover等），鼠标相对于可滑动区域（这里说的是浏览器的有效区域）x轴y轴的位置；

兼容性：

• clientX
  
  

• clientY
  
  

• pageX
  
  

• pageY
  
  

参考

offsetLeft、offsetWidth、clientWidth、scrollWidth、style.width···你都分清了吗？