您的位置: 首页  >  文章  >  offset系列,cllient系列,page系列,scroll系列的区别

offset系列,cllient系列,page系列,scroll系列的区别

分类: 文章 • 2024-02-02 11:39:58

offset系列

  • 和元素相关的offsetParent,offsetTop,offsetLeft,offsetWidth,offsetHeight

  1. offsetParent:

    offsetParent:指返回距离当前元素最近的一个带有定位属性的元素或者最近的 table,td,th,body元素,当元素的display:none时,则值为null;

  2. offsetTop,offsetLeft:

    offsetTop:从元素的上外边框到offsetParent元素的上内边框的距离
    offsetLeft:从元素的左外边框到offsetParent元素的左内边框的距离

  3. offsetWidth,offsetHeight:

    offsetWidth:返回元素的宽度,计算公式为border+padding+content;
    offsetHeight:与之同理

offset系列,cllient系列,page系列,scroll系列的区别

  • 和鼠标坐标相关的offsetX,offsetY

  1. offsetX,offsetY

    offsetX:鼠标距离当前元素(绑定事件的元素)左内边框的距离;
    offsetY:鼠标距离当前元素(绑定事件的元素)上内边框的距离

page系列

page系列没有和元素相关的,只有两个和鼠标坐标相关的属性pageX,pageY

  1. pageX,pageY

    pageX: 鼠标距离页面文档顶部的距离(包括被卷去的距离)

    pageY: 鼠标距离页面文档左边的左立(包括被卷去的距离)

client系列

  • 和元素相关的 clientTop,clientLeft,clientWidth,clientHeight

  1. clientTop,clientLeft

    clientTop:元素的上边框的高度

    clientLeft: 元素的左边框的宽度

  2. clientWidth,clientHeight

    clientWidth: 计算元素的宽度,计算公式为padding+centent,

    clientHeight: 计算元素的高度,计算公式为padding+centent,

offset系列,cllient系列,page系列,scroll系列的区别

  • 和鼠标坐标相关ClientX, ClientY

  1. clientX,clientY

    clientX: 鼠标距离页面可视区(除去页面顶部工具栏)顶部的高度(不包括被卷去的部分)

    clientY: 鼠标距离页面可视区(除去页面顶部工具栏)顶部的宽度(不包括被卷去的部分)

scroll系列

  • 和元素相关的scrollTop,scrollLeft,scrollWidth,scrollHeight

  1. scrollTop,scrollLeft

    scrollTop: 元素自身上下滚动条滚动的距离(并不是页面滚动的距离)

    scrollLeft: 元素自身左右滚动条滚动的距离(并不是页面滚动的距离);

  2. scrollWidth,scrollHeight

    scrollWidth: 元素实际的宽度,计算公式为content+padding+scrollLeft的最大值

    scrollHeight:元素实际的高度,计算公式为content+padding+scrollTop的最大值

  • 和鼠标相关的scrollX,scrollY

  1. scrollX,scrollY

    scrollX: 鼠标在电脑屏幕内的X坐标

    scrollY: 鼠标在电脑屏幕内的Y坐标

相关推荐