CSS 中clientX clientY offsetX offsetY 等属性说明

CSS 中clientX clientY offsetX offsetY 等属性说明

示意图
CSS 中clientX clientY offsetX offsetY 等属性说明

  1. event.clientX, event.clientY : 鼠标点击的位置距离 body 的大小
  2. event.screenX, event.screenY : 鼠标点击的位置距离 屏幕 的大小
  3. event.offsetX, event.offsetY 鼠标点击的位置距离 div盒子 的大小

没有滚动条的情况下

  1. offsetWidth, offsetHeight, 盒子的大小, 包括了 padding + border + div的width
  2. clientWidth, clientHeight, 盒子的大小, padding + div的width
  3. scrollWidth, scrollHeight 盒子的大小 , padding + div的width
    CSS 中clientX clientY offsetX offsetY 等属性说明

存在滚动条

  1. scrollWidth为实际内容的宽度
  2. clientWidth是内容可视区的宽度。
  3. offsetWidth是元素的实际宽度。
    CSS 中clientX clientY offsetX offsetY 等属性说明