视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
javascript中offset、client、scroll的属性总结_javascript技巧
2020-11-27 21:41:58 责编:小采
文档

HTML元素有几个offset、client、scroll开头的属性,总是让人摸不着头脑。在书中看到记下来,分享给需要的小伙伴。主要是以下几个属性:

  第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent

  第二组:clientWidth,clientHeight,clientLeft,clientTop

  第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop

  详细定义如下:

  1.1 HTML元素的offsetWidth,offsetHeight以CSS像素返回它的屏幕尺寸,包含元素的边框和内边距,不包含外边距。

  1.2 offsetLeft和offsetTop属性返回元素的X和Y坐标。通常,它们返回值即是文档坐标。但对于已定位元素的后代元素和一些其他元素(如表格单元),这些属性返回的坐标是相对于祖先元素的而非文档。

  1.3 offsetParent属性指定offsetLeft,offsetTop相对的父元素。如果offsetParent为null,后两者的返回值则为文档坐标。因此一般来说,用offsetLeft和offsetTop来计算元素e的位置需要一个循环:



该方法计算的位置也不总是正确的,推荐使用内置的getBoundingClientRect()方法。

  2.1 clientWidth和clientHeight类似于offsetWidth和offsetHeight属性,不同的是它们不包含边框大小,只包含内容和内边距。同时,如果浏览器在内边距和边框之间添加了滚动条,clientWidth和clientHeight的返回值也不包含滚动条。注意,对于类型,和这些内联元素,clientWidth和clientHeight总是返回0。

  2.2 clientLeft和clientTop返回元素的内边距的外边缘和它的边框的外边缘之间的水平距离和垂直距离,通常这些值就等于左边和上边的边框宽度。但是如果元素有滚动条,并且浏览器将这些滚动条旋转在左侧或顶部,他们就还包含了滚动条的宽度。对于内联元素,它们总是为0。通常clientLeft和clientTop用处不大。

  3.1 scrollWidth和scollHeight是元素的内容区域加上它的内边距再加上任何溢出内容的尺寸。当内容正好和内容区域匹配而没有溢出时,这些属性与clientWidth和clientHeight是相等的。但当溢出时,它们就包含溢出的内容,返回值比clientWidth和clientHeight要大。

  3.2 scrollLeft和scrollTop指定元素的滚动条的位置。注意,scrollLeft和scrollTop是可写的,通过设置它们来让元素中的内容滚动(HTML元素并没有类似Window对象的scrollTo()方法)。

obj.offset[WidthHeightTopLeft]  取控件相对于父控的位置
event.offset[XY] 取鼠标相在触发事件的控件中的坐标
event.screen[XY] 鼠标相对于屏幕坐标
event.client[XY] 鼠标相对于网页坐标在在
obj.scroll[WidthHeightTopLeft] 获取对象滚动的大小
obj.client[WidthHeightTopLeft] 获取对象可见区域的大小

显示全文
专题