溫馨提示×

offsetTop用法有哪些

小億
128
2023-08-11 09:28:42
欄目: 編程語言

offsetTop是一個DOM屬性，用于獲取一個元素相對于其offsetParent（最近的具有定位屬性的祖先元素）的上邊緣的距離。

offsetTop的用法主要有以下幾種：

  1. 獲取元素相對于其offsetParent的上邊緣的距離：
var element = document.getElementById("myElement");
var offsetTop = element.offsetTop;
console.log(offsetTop);
  1. 利用offsetTop實現(xiàn)元素的垂直居中：
var element = document.getElementById("myElement");
var parent = element.offsetParent;
var offsetTop = (parent.offsetHeight - element.offsetHeight) / 2;
element.style.top = offsetTop + "px";
  1. 利用offsetTop實現(xiàn)元素滾動到指定位置：
var element = document.getElementById("myElement");
var offsetTop = element.offsetTop;
window.scrollTo(0, offsetTop);
  1. 遍歷獲取一組元素的offsetTop：
var elements = document.getElementsByClassName("myElement");
var offsetTops = Array.from(elements).map(function(element) {
return element.offsetTop;
});
console.log(offsetTops);

需要注意的是，offsetTop是只讀屬性，不能直接修改元素的位置，如果需要修改元素的位置，可以通過修改元素的樣式屬性來實現(xiàn)。

0 踩