offsetTop和offset().top

原创 2016年06月01日 16:34:09

前段时间写了一个视觉差滚动的demo,是用js实现的。

第二次看这个例子,我想封装一个jquery插件。

首先demo中有两个button需要在jq中对它们进行定位,然而问题来了


我先得到第一张图片的位置,对图片中的button的top进行定位时,想法是将css样式中的top设置成this.img.offset().top + this.img.height() / 2 - this.prev.height() / 2 + 'px',然而却出现了上图的效果,button跑到了下方。将this.img.offset().top改为this.img.position().top依然无法出现我想要的效果 ,什么原因呢?

在用js实现时,也是采用的这种思想,用的是img.offsetTop + img.clientHeight/2 - prev.clientHeight/2 + 'px',这个是正常显示的。

于是在例子中我打印出来this.img.offset().top 和 img.offsetTop和this.img.position().top 的值,分别是185,35,0,这个 是什么原因呢?

经过测试,offset()得到的结果永远是相对于文档的偏移值,它会忽略元素所有的父元素;

查了一下资料,其中position()属性是获取它最近的具有相对位置(position:relative)的父级元素的距离,如果找不到这样的元素,则返回相对于浏览器的距离。可是,这样得出的0值不符合我的预期,在html结构中,离img最近的relative元素是.wrap元素(请参见另一篇文章http://blog.csdn.net/u013742084/article/details/51339213),想象中应该是35才对,这一次是怎么也想不通了。。。。待后续补充。。。

offsetTop获取它最近的具有相对位置(position:relative)的父级元素的距离,如果找不到这样的元素,则返回相对于浏览器的距离。这是一个相当纠结的属性;

我做了一个测试。

 <h1 style="text-align: center;background-color: #222;">这是一个大大的标题</h1>
    <div id="container">
        <div class="panel" id="panel1"></div>
        <div class="panel" id="panel2"></div>
        <div class="panel" id="panel3"></div>
    </div>

添加了以下css样式:

* {
            margin: 0;
            padding: 0;
            font-family: 'Microsoft Yahei'
        }
        a {
            color: #000;
            text-decoration: none;
        }
        .panel {
            margin:20px auto 20px auto;
            width:80%;
            height: 500px;
            transition: all .3s;
        }
        #panel1 {background-color: red;}
        #panel2 {background-color: green;}
        #panel3 {background-color: blue;}



打印id为panel1的offsetTop、offset().top、position().top的值为62 62  42

我为id为container的div添加样式:  style="position: relative;"结果是 0 62 -20,百思不得其解

我有尝试了一个新的思路,在原有的上面的html结构上,添加两个操作:为id为container的div添加样式:  style="position: relative;",在container中,panel1之上添加了一个h1的标签,panel的三个值变为了 62 104 42,

请大大的关注offsetTop这一属性,原先没有h1标签时,它的值是0,可是添加了h1后他的值变为了62,请注意h1的高度只有42,那个20 是从哪来的,唯一的解释是panel1的margin-top是20px,这么一想,脑袋又乱了,margin-top怎么又起作用了?想不通,,,

先写到这,等后续补充。


PS:所有的测试都是在谷歌浏览器上进行。


offsetTop、offsetLeft、offsetWidth、offsetHeight

//获取坐标位置 function getpos(e){ var t=e.offsetTop; var l=e.offsetLeft; var height=e.o...
  • qq_27626333
  • qq_27626333
  • 2016年08月12日 21:26
  • 1089

无定位父元素时offsetParent为body,但是offsetTop/offsetLeft计算距离从html开始

问题1:什么是offsetParent? 解答:返回的是被定位的祖先元素,如果没有被定位的元素是body元素! 问题2:发生margin重叠以后,我们怎么计算到offsetParent的距离? 注意:...
  • liangklfang
  • liangklfang
  • 2016年01月08日 10:21
  • 2569

详解JS位置、宽高属性之一:offset系列

很多初学者对于JavaScript中的offset、scroll、client一直弄不明白,虽然网上到处都可以看一张图(图1),但这张图太多太杂,并且由于浏览器差异性,图示也不完全正确。 图一   ...
  • Inuyasha1121
  • Inuyasha1121
  • 2015年10月15日 10:59
  • 11648

Jquery中offset()使用注意事项

Jquery中offset()使用中,常用的方法有:          $(selector).offset();          top: $(selector).offset().top;  ...
  • Yyang_csdn
  • Yyang_csdn
  • 2016年12月01日 09:16
  • 1564

HTML中常见的各种位置距离(clientTop clientLeft clientWidth ClientHeight offsetleft offsettop offsetwidth offset

DOM中都有一些什么宽度、高度。 常见的 offsetWidth clientWidth scrollWidth offsetHeight clientHeight ...
  • zxf13598202302
  • zxf13598202302
  • 2016年04月15日 16:25
  • 1530

Js中_关于top、clientTop、scrollTop、offsetTop

  • 2011年08月18日 14:14
  • 48KB
  • 下载

页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight

1.top 此属性仅仅在对象的定位(position)属性被设置时可用。否则,此属性设置会被忽略。 测试top 上面是一个段落P包含在一个DIV内,可以看到P的top设置为-5px后,它...
  • NextStand
  • NextStand
  • 2015年11月21日 22:41
  • 564

JavaScript中关于top、clientTop、scrollTop、offsetTop的用法

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.of...
  • pengyouchuan
  • pengyouchuan
  • 2011年12月22日 12:18
  • 432

Js中 关于top、clientTop、scrollTop、offsetTop的用法

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.of...
  • chifengchifeng
  • chifengchifeng
  • 2012年11月22日 10:18
  • 395

Js中 关于top、clientTop、scrollTop、offsetTop等

http://www.cnblogs.com/freewind/archive/2008/05/20/1203183.html 一个重要的实例,选摘处忘记了 ...
  • crazy_fire
  • crazy_fire
  • 2012年07月06日 11:30
  • 621
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:offsetTop和offset().top
举报原因:
原因补充:

(最多只允许输入30个字)