美文网首页
三大系列:offset,scroll,client

三大系列:offset,scroll,client

作者: 长鲸向南 | 来源:发表于2020-01-03 12:21 被阅读0次

一,offset系列

1,offsetWidth

  • 获取到当前元素的宽度(padding+border+width)
  • style.width也返回这个宽度
  • 区别:
  • 如果没有给 HTML 元素指定过 width样式,或者样式没有写入标签内,则 style.width 返回的是空,如下图所示。
  • style.width返回值除了数字外还带有单位px,而offsetWidth返回的数值类型
image

(根据数值计算也可以知道返回的宽度是元素的width+左右两个padding和左右两个border)

2,offsetHeight

  • 获取到当前的元素的高度(height+padding+border)
  • 其他同offsetWidth类似
image

3,offsetLeft

  • 获取元素到最近的定位父盒子的左侧距离,如果没有就继续向上层寻找直到body
  • 获取的距离主要是 父元素的margin+父元素的padding+父元素的border+自己的margin(元素没有脱离文档流)
image
  • 元素脱离文档流后,就是元素自身的margin值+left,如图所示:
image

4,offsetTop

  • 获取元素到最近的定位父盒子的上侧距离,如果没有就继续向上层寻找直到body
  • 获取的距离主要是 父元素的margin+父元素的padding+父元素的border+自己的margin(元素没有脱离文档流)
image
  • 元素脱离文档流后只跟自己的margin和top有关
image

5,offsetParent

  • 用于获取该元素中有定位的最近父级元素
  • 如果当前元素的父级元素都没有进行定位,那么offsetParent为body
image image

二,scroll系列

1,scrollHeight

  • 获取元素中内容的实际高度(没有边框,有padding),如果没有内容或者内容不足,那就获取到元素的高度
image image

2,scrollWidth

  • 同scrollHeight
  • 获取元素中内容的实际宽度(没有边框,有padding),如果内容不足或者没有内容就获取元素的宽度

3,scrollTop

  • 元素向上滚动出去的距离
image

4,scrollLeft

  • 元素向左滚动出去的距离
image

5,兼容问题

    • 未声明 DTD: 谷歌,火狐,IE9+支持:
  • document.body.scrollTop/scrollLeft
    • 已经声明DTD:IE8以下支持:
  • document.documentElement.scrollTop/scrollLeft
    • 火狐/谷歌/ie9+以上支持的:
  • window.pageYOffest/pageXOffest
  • 所以兼容代码:
function getScroll() {
        return {
            left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0,
            top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0
        };
    }

三、client系列

image

1,clientWidth

  • 获取网页可视区域宽度,不包括滚动条,不包括边框;相当于width+padding;

2,clientHeight

  • 获取网页可视区域的高度,不包括滚动条,不包括边框;相当于height+padding;

3,clientLeft

  • 相当于左边边框的宽度(有滚动条会加上滚动条的宽度)

4, clientTop

  • 相当于上边框的宽度(有滚动条会加上滚动条的宽度)

5,clientX

  • 获取鼠标事件发生时,鼠标距离可视区域的水平坐标

6,clientY

  • 获取鼠标事件发生时,鼠标距离可视区域的垂直坐标
image

相关文章

网友评论

      本文标题:三大系列:offset,scroll,client

      本文链接:https://www.haomeiwen.com/subject/fmjzoctx.html