文章导航

JavaScript offsetTop

2017-8-24 20:47| 作者: antzone| 查看: 27907| 评论: 5|来自: 蚂蚁部落

dom属性的使用都非常简单,难点在于如何真正理解属性的实质。

首先从名称入手,offsetTop由如下两个单词构成:

(1).offset:具有偏移量的意思。

(2).top:具有顶部的意思。

此属性的功能确实名副其实,它返回当前元素顶部相对指定元素顶部的偏移量。

这个指定元素由当前元素的offsetParent属性确定。

图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/28/192145nfdrgctzdorrrfrr.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

offsetParent属性返回值简单介绍如下:

(1).返回距离当前元素最近的采用定位祖先元素。

(2).如果祖先元素中没有采用定位的元素,则返回body元素。

IE7浏览器中,offsetParent返回值是距离它最近的父元素,有兼容需求的注意一下。

更多内容参阅JavaScript offsetParent一章节。

特别说明:offsetTop是只读属性。

浏览器支持:

(1).IE浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).opera浏览器支持此属性。

(5).火狐浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{padding:20px;margin:30px;}
#box{width:300px;height:210px;background:green;margin:20px;}
#middle{width:200px;height:160px;background:blue;overflow:hidden;}
#inner{width:50px;height:50px;background:#ccc;line-height:50px;margin:80px;}
</style>
<script>
window.onload=function(){
  let inner=document.getElementById("inner");
  inner.innerHTML=inner.offsetTop;
}
</script>
</head>
<body>
<div id="box">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>
</body>
</html>

上述代码可以获取inner的offsetTop属性值。

代码分析如下:

(1).inner没有具有定位的祖先元素,那么inner的offsetParent返回body元素。

(2).那么offsetTop属性返回值就是inner顶部距离body顶部的偏移量。

(3).offsetTop=80(inner.margin-top)+20(box.margin-top)+20(body.padding-top)+30(body.margin-top)。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{padding:20px;margin:30px;}
#box{
  width:300px;
  height:210px;
  background:green;
  margin:20px;
  overflow:hidden;
  position:relative;
}
#middle{width:200px;height:160px;background:blue;margin:20px;overflow:hidden;}
#inner{width:50px;height:50px;background:#ccc;line-height:50px;margin:80px;}
</style>
<script>
window.onload=function(){
  let inner=document.getElementById("inner");
  inner.innerHTML=inner.offsetTop;
}
</script>
</head>
<body>
<div id="box">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>
</body>
</html>

上述代码可以获取inner的offsetTop属性值。

代码分析如下:

(1).inner的祖先元素中,box采用定位,那么inner的offsetParent返回inner元素。

(2).那么offsetTop属性返回值就是inner顶部距离inner顶部的偏移量。

(3).offsetTop=80(inner.margin-top)+20(box.margin-top)。

7

鲜花
2

握手

雷人

路过

鸡蛋

刚表态过的朋友 (9 人)

发表评论

最新评论

引用 height_rain 2019-3-22 13:41
offsetTop=80(inner.margin-top)+20(box.margin-top)。加上的20不是box的margin-top,而是middle的margin-top
不信的话把box的margin-top去了,看下inner的offsetTop会不会变,在把middle的margin去了,看下offsetTop会不会变
引用 坎大哈 2018-1-24 13:35
这个是全网介绍最好的文章
引用 小屁孩 2018-1-3 15:16
不错,介绍的很好
引用 老汉 2017-12-8 11:48
这是最好的关于此属性的介绍,没有之一,良心
引用 野夏 2017-9-17 10:19
超棒 讲得好清楚

查看全部评论(5)

返回顶部