📅 最后修改于: 2023-12-03 14:41:49.086000 🧑 作者: Mango
在HTML和JavaScript中，有许多属性可以用来获取和设置元素的位置、大小和其他属性。其中，位置协议属性用于设置和获取元素的位置信息，比如offsetLeft和offsetTop属性可用于获取元素相对于其定位父元素的左侧和顶部的偏移量。
以下是DOM的位置协议属性，这些属性用于确定或修改元素在HTML文档中的位置。
offsetParent: 获取的是指向最近的已定位祖先元素，如果没有已定位祖先元素，则指向<body>元素；可以通过该属性来获取元素相对于定位父元素的偏移量。offsetLeft: 获取元素相对于其offsetParent元素的左边框的像素数。offsetTop: 获取元素相对于其offsetParent元素的上边框的像素数。offsetWidth: 获取元素的宽度，包括边框、内边距和滚动条宽度。offsetHeight: 获取元素的高度，包括边框、内边距和滚动条高度。clientWidth: 获取元素内容区域的宽度，不包括边框和滚动条宽度。clientHeight: 获取元素内容区域的高度，不包括边框和滚动条高度。scrollWidth: 获取元素内容的实际宽度（包括溢出的内容）。scrollHeight: 获取元素内容的实际高度（包括溢出的内容）。scrollLeft: 获取或设置元素的横向滚动位置。scrollTop: 获取或设置元素的纵向滚动位置。<div id="myDiv" style="width: 100px; height: 100px; border: 1px solid black; overflow: scroll;">
<p>我是一个有滚动条的DIV元素</p>
</div>
const myDiv = document.getElementById("myDiv");
console.log(myDiv.offsetTop); // 0
console.log(myDiv.offsetLeft); // 0
console.log(myDiv.offsetWidth); // 102
console.log(myDiv.offsetHeight); // 102
console.log(myDiv.clientWidth); // 82
console.log(myDiv.clientHeight); // 82
console.log(myDiv.scrollWidth); // 117
console.log(myDiv.scrollHeight); // 117
console.log(myDiv.scrollTop); // 0
console.log(myDiv.scrollLeft); // 0
myDiv.scrollTop = 50; // 滚动到50px的位置
以上代码创建了一个带有滚动条的DIV元素，并使用JavaScript中的位置协议属性来获取和设置该元素的位置信息和滚动条位置。