jquery的offset.top用原生js怎样写
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery的offset.top用原生js怎样写相关的知识，希望对你有一定的参考价值。
你好，原生的写法是这样的
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*,bodypadding:0; margin:0
.divposition:absolute; left:0px; top:50px; width:50px; height:50px; background-color:#006
</style>
</head>
<body>
<div class="div" id="obj"></div>
<script type="text/javascript">
var obj = document.getElementById("obj");
alert(obj.offsetTop)
</script>
</body>
</html>
希望可以帮助到你 参考技术A
首先，jQuery的offset().top指的是元素到窗口顶部的距离，而原生js的offsetTop指的是元素到父元素的距离，所以我们可以采用递归的方法得到这个值。
function getOffset(node, offset)// 创建一个对象存储offset
if (!offset)
offset = ;
offset.top = 0;
offset.left = 0;
// 当该节点为body节点时，结束递归
if (node == document.body)
return offset;
offset.top += node.offsetTop;
offset.left += node.offsetLeft;
// 向父元素累加offset里的值
// 一开始我是这样写的return getOffset(node.parentNode, offset);
// 后面我发现对于一些position定位的元素，offsetTop指的是它与offsetParent的距离
// 所以node.parentNode应改为node.offsetParent
return getOffset(node.offsetParent, offset);
var div = document.getElementById('div');
getOffset(div).top;
getOffset(div).top的值就等于jQuery的div.offset().top
如何使用jQuery Draggable和Droppable实现拖拽功能
参考技术A 给你提供一个拖拽的方法 function drag(id) var oDiv = $(id), disX = 0, disY = 0, _this = this; oDiv.mousedown(function(e) fnDown(e); ); function fnDown(e) var _this = this; disX = e.pageX - oDiv.offset().left; disY = e.pageY - oDiv.offset().top; $(document).mousemove(function (e) fnMove(e); ); $(document).mouseup(function () fnUp(); ); return false; function fnMove(e) var l = e.pageX - disX; var t = e.pageY - disY; if(l<0) l=0; else if(l>$(document).width()-oDiv.width()) l=$(document).width()-oDiv.width(); if(t<0) t=0; oDiv.css( 'position': 'absolute', 'left': l, 'top': t ); function fnUp() $(document).unbind('mousemove'); $(document).unbind('mouseup');以上是关于jquery的offset.top用原生js怎样写的主要内容，如果未能解决你的问题，请参考以下文章
js或jquery怎样获取htm中div控件相对于页面的left和top值解决方
如何使用jQuery Draggable和Droppable实现拖拽功能