JS中 clientWidth && offsetWidth && scrollWidth 的区别

510 阅读1分钟
  1. clientWidth、clientHeight、clientTop、clientLeft 的区别: clientWidth(clientHeight): 元素内部的宽度(高度),实际宽高为:
    clientWidth = width + padding
    clientHeight = height + padding

clientTop(clientLeft): 上(左)边框的宽度,实际宽度为:
clientTop = border.top
clientLeft = border.left

2. offsetWidth 、offsetHeight、offsetTop、offsetLeft 的区别: offsetWidth(offsetHeight): 元素的布局宽度(高度),实际宽高为:
offsetWidth = width + padding + border
offsetHeight = height + padding + border

offsetTop(offsetLeft): 当前元素的上边框 (左边框) 外边缘到最近的已定位父级(offsetParent)上边框(左边框)内边缘的距离。如果没有定位的父级,则是到body 顶部(左边)的距离

  1. scrollWidth 、scrollHeight、scrollTop、scrollLeft 的区别: scrollWidth(scrollHeight): 获取对象的滚动宽度(高度)。
    scrollTop : 设置或获取位于对象最顶端和对象中可见内容的最顶端之间的距离;(height+padding)。
    scrollLeft: 设置或获取位于对象左边界和对象中目前可见内容的最左端之间的距离(width+padding)