首页 > 蚂蚁部落 > 正文

jQuery获取div距离窗口顶部或者父元素顶部的距离
2017-12-27 09:19:52   来源:   评论:0 点击:

在实际应用或许会需要计算出指定div距离窗口或则它的父元素的顶部的距离。下面通过实例对此做一下简单的介绍,代码实例如下:[HTML] 纯文本

在实际应用或许会需要计算出指定div距离窗口或则它的父元素的顶部的距离。

下面通过实例对此做一下简单的介绍,代码实例如下:

[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; }#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="third"></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()方法一章节。

相关热词搜索:

上一篇:jQuery paste事件用法
下一篇:javascript匹配js注释正则表达式代码实例

分享到: 收藏
评论排行