Javascript中宽高和偏移

最新推荐文章于 2019-11-25 23:52:15 发布

原创最新推荐文章于 2019-11-25 23:52:15 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jQuery

JavaScript 同时被 2 个专栏收录

22 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

本文深入探讨了原生JavaScript和jQuery中与元素尺寸、滚动和位置相关的属性和方法，如clientHeight、clientWidth、scrollHeight、scrollTop等，以及如何使用这些属性进行网页布局和交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生JavaScript

clientHeight/Width:

Element.clientHeight==>元素包括padding的高度，不包括滚动条
Element.clientWidth==>元素包括padding的宽度，不包括滚动条
document.body/documentElement.clientWidth/Height==>:代表视口的宽高

scrollHeight/With:

Element.scrollHeight/With==>元素内容包括可滚动的宽高
document.body/documentElement.scrollHeight/Width==>文档的宽高

scrollTop/Left:

Element.scrollTop/Left==>元素滚动条的位置
document.doby/documentElement.scrollTop/Left==>文档滚动条的位置

原生JavaScript只能获取元素相对于最近定位祖先元素(offsetParent)的偏移：

Element.offsetTop/Left

getBoundingClientRects()方法

该返回元素的大小及相对于视口的位置
大小的含义：包含border+padding+content的大小
位置的含义：top，left包含margin；bottom,right不包含margin(不明白可以测试一下)

jQuery中关于宽高和偏移：

宽高：

height(),width()==>获取元素的内容的宽高值，
				  $(window).height():返回视口的高度
				  $(document).height():返回文档的高度
innerHeight(),innerWidth()==>获取元素包括padding的宽高值，不适用于window和document
outerHeight(),outerWidth()==>获取元素包括Margin的宽高值，不适用于window和document

偏移：

position()==>获取相对于最近定位祖先元素的偏移（返回一个包括left、top属性的对象）
offset()==>获取相对于文档的偏移（返回一个包括left、top属性的对象）
scrollLeft()==>获取元素水平滚动条的位置
scrollTop()==>获取元素垂直滚动条的位置