HTML | DOM 位置原点属性

在HTML文档中，每个元素都有一个位置，而这个位置相对于文档的起点。DOM位置原点属性指的是描述一个元素相对于该起点的位置。

offsetParent属性

offsetParent属性返回一个元素的最近的定位祖先元素。如果该元素没有定位祖先元素，则document.body就是其定位祖先元素。

var element = document.getElementById("example");
var parent = elem.offsetParent;
console.log(parent);

offsetLeft和offsetTop属性

offsetLeft属性和offsetTop属性返回一个元素相对于其offsetParent元素的水平和垂直偏移量。

var element = document.getElementById("example");
var leftOffset = elem.offsetLeft;
var topOffset = elem.offsetTop;
console.log(leftOffset, topOffset);

offsetWidth和offsetHeight属性

offsetWidth和offsetHeight属性返回一个元素的布局宽度和布局高度，包括内边距和边框，但不包括外边距。

var element = document.getElementById("example");
var width = elem.offsetWidth;
var height = elem.offsetHeight;
console.log(width, height);

小结

offsetParent属性返回一个元素的最近的定位祖先元素，offsetLeft和offsetTop属性返回相对于其offsetParent元素的水平和垂直偏移量，而offsetWidth和offsetHeight属性返回元素的布局宽度和布局高度。这些属性都可以用于计算元素的准确位置和大小，从而对页面布局进行精确定位和调整。