Linux 拨号vps windows公众号手机端

offsetTop用法有哪些

lewis 6年前 (2019-02-03) 阅读数 8 #程序编程
文章标签 offsetTop

offsetTop是一个DOM属性,用于获取一个元素相对于其offsetParent(最近的具有定位属性的祖先元素)的上边缘的距离。

offsetTop的用法主要有以下几种:

  1. 获取元素相对于其offsetParent的上边缘的距离:
var element = document.getElementById("myElement");
var offsetTop = element.offsetTop;
console.log(offsetTop);
  1. 利用offsetTop实现元素的垂直居中:
var element = document.getElementById("myElement");
var parent = element.offsetParent;
var offsetTop = (parent.offsetHeight - element.offsetHeight) / 2;
element.style.top = offsetTop + "px";
  1. 利用offsetTop实现元素滚动到指定位置:
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是只读属性,不能直接修改元素的位置,如果需要修改元素的位置,可以通过修改元素的样式属性来实现。

版权声明

本文仅代表作者观点,不代表米安网络立场。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门