offsetWidth、offsetHeight、offsetLeft、offsetTop以及scrollTop,scrollLeft的个人理解

来源：互联网发布：手机涂鸦软件编辑：程序博客网时间：2024/05/21 04:19

其实写这篇博客的原因，是为了记录一下自己对一些属性的理解，也是为了告诉自己问题一定要解决，不能拖，不然到后来会发现自己不会的越积累越多，最终就会失去信心了。

下面就步入正题：

offsetWidth、offsetHeight、offsetLeft、offsetTop以及scrollTop,scrollLeft为了更好的理解它们，我将它们分为三组分别为

1、offsetWidth、offsetHeight

这两个属性的值只与该元素有关，与周围的元素（父级与子级元素无关）。

代码示例：

代码结果展示：

接下来看代码中text的布局图：

offsetWidth = border-left + border-right + padding-left+padding-right+元素本身的宽度;

offsetHeight = border-top + border-bottom + padding-top+padding-bottom+元素本身的高度；

显而易见是450和250

2、offsetLeft、offsetTop

这两个属性与offsetParent有关，查阅了别的文档，其英文解释：返回该对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。

代码依然是上述代码

通过上述代码，可以计算出offsetTop = pardent.margin-top +pardent.border-width+ pardent.padding-width =20+20+40;

同理offsetLeft也是这样计算的，都是跟父元素有关系。

3、scrollTop,scrollLeft

这两个属性是相对于滚动条,垂直位置，当滚动条不存在的时候，obj.scrollLeft 和obj.scrollTop的值为0，滚动条存在的时候，不同位置值是不同的。

总结：

上面的这些属性，主要是文字和图片的滚动时使用的，这些是我的个人在工作的过程中的理解，希望对大家有帮助，不对的地方，也希望可以指出，一起进步！

0 0