js实现jquery的offset()方法实例

本文实例讲述了js实现jquery的offset()方法。分享给大家供大家参考。具体分析如下：

用过jQuery的offset()的同学都知道offset().top或offset().left很方便地取得元素相对于整个页面的偏移。

而在js里，没有这样直接的方法，节点的属性offsetTop可以获得该节点相对于父节点的相对偏移，但不能直接获得其绝对偏移，我们可用节点逐层递归向上来相加offsetTop来获得绝对偏移。

代码如下:

function getOffset(Node, offset) {
    if (!offset) {
        offset = {};
        offset.top = 0;
        offset.left = 0;
    }

if (Node == document.body) {//当该节点为body节点时，结束递归
        return offset;
    }

offset.top += Node.offsetTop;
    offset.left += Node.offsetLeft;

return getOffset(Node.parentNode, offset);//向上累加offset里的值
}

使用时，则如：

代码如下:

var a = document.getElementById('a');
//getOffset(a).top
//getOffset(a).left

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • 获取offsetTop和offsetLeft值的js代码(兼容)

    复制代码 代码如下: function offsetTop( elements ){ var top = elements.offsetTop; var parent = elements.offsetParent; while( parent != null ){ top += parent.offsetTop; parent = parent.offsetParent; }; return top; }; function offsetLeft( elements ){ var left =

  • 详解原生js实现offset方法

    在为 jTool 提供 offset (获取当前节点位置)方法时, 先后使用了两种方式进行实现, 现整理出来以作记录. 前后共使用了两种方式实现了该方法, 这里将这两种方法分别列出. 通过递归实现 function offset(element) { var offest = { top: 0, left: 0 }; var _position; getOffset(element, true); return offest; // 递归获取 offset, 可以考虑使用 getBounding

  • js中的scroll和offset 使用比较的实例与分析

    1.offsetTop     :当前对象到其上级层顶部的距离.不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性. 2.offsetLeft    :当前对象到其上级层左边的距离.不能对其进行赋值.设置对象到页面左部的距离请用style.left属性. 3.offsetWidth   :当前对象的宽度.与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中

  • javascript的offset、client、scroll使用方法详解

    javascript的offset、client、scroll使用方法详解

     offsetTop 指元素距离上方或上层控件的位置,整型,单位像素. offsetLeft 指元素距离左方或上层控件的位置,整型,单位像素. offsetWidth 指元素控件自身的宽度,整型,单位像素. offsetHeight 指元素控件自身的高度,整型,单位像素. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网

  • javascript中offset、client、scroll的属性总结

    HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent   第二组:clientWidth,clientHeight,clientLeft,clientTop 第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop 详细定义如下: 1.

  • js实现jquery的offset()方法实例

    本文实例讲述了js实现jquery的offset()方法.分享给大家供大家参考.具体分析如下: 用过jQuery的offset()的同学都知道offset().top或offset().left很方便地取得元素相对于整个页面的偏移. 而在js里,没有这样直接的方法,节点的属性offsetTop可以获得该节点相对于父节点的相对偏移,但不能直接获得其绝对偏移,我们可用节点逐层递归向上来相加offsetTop来获得绝对偏移. 复制代码 代码如下: function getOffset(Node, of

  • jQuery中offset()方法用法实例

    本文实例讲述了jQuery中offset()方法用法.分享给大家供大家参考.具体分析如下: 此方法返回或设置所匹配元素相对于document对象的偏移量. 语法结构一: 复制代码 代码如下: $(selector).offset() 获取匹配元素在当前document的相对偏移. 返回的对象包含两个整型属:top和left. 此方法只对可见元素有效. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta char

  • jq源码解析之绑在$,jQuery上面的方法(实例讲解)

    1.当我们用$符号直接调用的方法.在jQuery内部是如何封装的呢?有没有好奇心? // jQuery.extend 的方法 是绑定在 $ 上面的. jQuery.extend( { //expando 用于决定当前页面的唯一性. /\D/ 非数字.其实就是去掉小数点. expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ), // Assume jQuery is ready wit

  • 各种选择框jQuery的选中方法(实例讲解)

    select下拉列表的选中方法是:$("slect option:eq(1)").attr("selected",true);//选中第二个option chekbox的选中方法:$("[value=check1"]:checkbox).attr("checked",true); radio的选中方法:$("[value=radio2"]:radio).attr("checked",tr

  • JS和jQuery使用submit方法无法提交表单的原因分析及解决办法

    JS和jQuery使用submit方法无法提交表单的原因分析及解决办法

    昨天,在做一个表单异步提交内容的时候,遇到很奇怪的问题,submit()方法无法进行提交,每次提交都是把 当前给刷新了,网络抓包发现,每次都是 get方式去获取 当前页面,完全没有post 请求,想着以前 遇上这样的问题 都是因为 表单中 有 name 或者 id 这些命名跟submit 有冲突,但是检查了几次,始终没有发现 名字冲突,所以这个可能性被排除. 平常自己做触发按钮,基本不用a 标签,但是昨天不知道什么 问题,竟然用了 a 而且还给了 href 为空,由于这个a 的class 有多个

  • 浅谈jQuery的offset()方法及示例分享

    offset()方法的定义和用法: 此方法返回或设置所匹配元素相对于document对象的偏移量. 语法结构一: $(selector).offset() 获取匹配元素在当前document的相对偏移. 返回的对象包含两个整型属:top和left. 此方法只对可见元素有效. 实例代码: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <style type="te

  • js实现跨域的方法实例详解

    本文实例讲述了js实现跨域的方法.分享给大家供大家参考.具体分析如下: 由于同源策略的限制,XMLHttpRequest只允许请求当前源(包含域名.协议.端口)的资源. json与jsonp的区别: JSON是一种数据交换格式,而JSONP是一种依靠开发人员创造出的一种非官方跨域数据交互协议. script标签经常被用来加载不同域下的资源,可以绕过同源策略.(有src属性的都可以获取异域文件). 如果请求的这个远程数据本身就是一段可执行的js,那么这些js会被执行(相当于eval).   方法一

  • 在JavaScript中重写jQuery对象的方法实例教程

    jQuery是一个款非常优秀的类库,它给我们解决了很多的客户端编程,但是任何东西都不是万能的,当它不能满足我们的需求时我们就需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:比如我现在的web应用程序大多数时候的数据交互都是通过Ajax来完成的,这样就可以将一些隐藏字段的数据保存在HTML标签的属性中,使HTML标签的代码量减少,如:ID,Timestamp等等,这些不需要用户输入但又不得不提交的字段,通过表单提交的做法是 <input name="ID" val

  • JS Math对象与Math方法实例小结

    JS Math对象与Math方法实例小结

    本文实例讲述了JS Math对象与Math方法.分享给大家供大家参考,具体如下: JavaScript 提供了 Math 内置对象方便我们进行数学运算 他具有数学常用和函数的属性和方法. 常用属性 //max() 与 min() 求一组数的最大值和最小值 Math.max(10,9,22); // => 22 Math.min(10,9,8,22); // => 8 常用属性 Math.PI // 圆周率 => 3.141592653589793 Math.E // 自然对数底,数学中的

  • node.js Promise对象的使用方法实例分析

    本文实例讲述了node.js Promise对象的使用方法.分享给大家供大家参考,具体如下: Promise对象是干嘛用的? 将异步操作以同步操作的流程表达出来 一.Promise对象的定义 let flag = true; const hello = new Promise(function (resolve, reject) { if (false) {//异步操作成功 resolve("success"); } else { reject("error");

随机推荐