你的位置:首页 > Java教程

[Java教程]jQuery如何获取div距离窗口顶部或者父元素顶部的距离


jQuery如何获取div距离窗口顶部或者父元素顶部的距离:
在实际应用或许会需要计算出指定div距离窗口或则它的父元素的顶部的距离,下面就通过实例对此做一下简单的介绍,下面直接看代码实例,然后再进行分析,代码如下:

<!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; }#box{ width:200px; height:200px; background-color:blue; top:100px; left:100px; padding:50px; position:absolute;}#inner{ width:100px; height:100px; background-color:red;}span{color:red;}</style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function(){   $("#first").text($("#inner").offset().top);   $("#second").text($("#inner").position().top);   $("#third").text($("#inner").offset().top-$("body").scrollTop());  })})</script></head> <body style="height:1000px;">  <div id="box">  <div id="inner"></div> </div> <div style="margin-top:420px;">  距离文档顶部距离:<span id="first"></span>  距离父元素顶部的距离:<span id="second"></span>  距离窗口顶部的距离:<span id="second"></span> </div> <input type="button" id="bt" value="点击显示结果"></body> </html>

以上代码,点击按钮可以在span元素中显示相应的距离尺寸,关于在代码中使用的函数和属性建议参阅相关阅读中的文章,因为里面都进行详细的描述,这里就不做介绍了。
相关阅读:
1.offset()函数可以参阅jQuery的offset()方法一章节。
2.position()函数可以参阅jQuery的position()方法一章节。
3.scrollTop()函数可以参阅jQuery的scrollTop()方法一章节。
4.text()函数可以参阅jQuery的text()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9482

更多内容可以参阅:http://www.softwhy.com/jquery/