关于js获取dom 节点到浏览器顶/左部的距离，Jquery里面有封装好的offset().top/offset().left，只到父级的顶/左部距离position().top/position().left；

原生写的话就是用获取节点，do while循环就可以了。代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>原生JS获取DOM 节点到顶部/最左部的距离</title>
  8. </head>
  9. <body>
  10.    <ul>
  11.        <li>11111</li>
  12.        <li>11111</li>
  13.        <li>11111</li>
  14.        <li>11111</li>
  15.        <li id="item">11111</li>
  16.    </ul>
  17.     <script>
  18.         var dom = document.getElementById('item');
  19.         var iTop = 0,iLeft=0;
  20.         do {
  21.             iTop += dom.offsetTop;//如果是左侧就是offsetLeft
    　　　　　　　iLeft +=dom.offsetLeft
                dom = dom.parentNode //如果DOM 节点 的parentNode存在，把当前的节点赋予成parentNode；
  22.        } while (dom.parentNode);
  23.         console.log('到顶部的距离是'+iTop+'px','到最左侧的距离是'+iLeft+'px')
  24.     </script>
  25. </body>
  26. </html>

原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离的更多相关文章

  1. 原生js操作Dom节点:CRUD

    知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. ...

  2. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  3. 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...

  4. 原生Js获取某个节点后面的第一个标签

    nextSlbling属性 获取某个节点后面的第一个节点(可能是标签 文本) 判断获取的节点是否为标签节点还是文本节点 window.onload=function(){ var pagecount= ...

  5. 原生JS中DOM节点相关API合集

    节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只 ...

  6. js获取dom节点

    var s= document.getElementById("test");del_ff(s); //清理空格var chils= s.childNodes; //得到s的全部子 ...

  7. js获取dom节点之 id 获取

    在JavaScript中,标准的id选择器调用语法是: document.getElementById('myid').style.width = pc + "%"; 但是,今天发 ...

  8. 原生js操作dom的方法

    今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. documen ...

  9. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

随机推荐

  1. 高性能Nginx服务器-负载均衡

    Location正则表达式 location的作用 location指令的作用是根据用户请求的URI来执行不同的应用,也就是根据用户请求的网站URL进行匹配,匹配成功即进行相关的操作. locatio ...

  2. vue-cli 搭建的项目关闭 eslint

    一般不会关闭eslint,基于接手的代码用eslint的时候报错太多,强迫症的人实在忍受不了报错,先实行关闭: 1.在build 下面的 webpack.base.conf.js 找到 module- ...

  3. 逆向 AWS API 设计

    由于AWS并没有像Google一样公开出一份API Design Guide,所以只能根据 API 的模样去逆向工程最初的设计考量.既然上一篇介绍了很多 REST 的缺陷,那么这里也会介绍一下 AWS ...

  4. 日期计算、正则、sequence、索引、表连接、mybatis

    ************************** mybatis ******************************************* #{} 的参数替换是发生在 DBMS 中, ...

  5. introduce myself

    大家好啊,我是来自计算机一班的喻达龙,是2018届的萌新一个,很高兴与大家相约在这里.我想,大家都是怀抱相同的梦想带着一样的抱负走进涉外.我们从稚嫩蜕化为成熟,我相信我们在这里会从菜鸟变为大佬的,当然 ...

  6. 《CSS世界》读书笔记（三） --width:auto

    <!-- <CSS世界> 张鑫旭著  --> width:auto width:auto至少包含了以下4种不同的宽度表现: 充分可利用空间.比方说,<div>.&l ...

  7. 多条件搜索优化sql

    SELECT ctm.* FROM crawltaskmanage ctm,urlmanage um WHERE (ctm.status='0' AND um.`urlId`=ctm.`urlId`) ...

  8. 使用SVN提交代码，快速简单的换地址方法

    1.找到你项目所在的文档,然后删除.svn文件,如下图: 2.然后在使用小乌龟的图标,进行项目的导入,界面如下: 3.然后输入SVN库的地址,点击ok界面如下: 4.同步到eclipse的方法是,复制 ...

  9. Redis学习-常用命令

    keys * 返回满足的所有键 exists key 是否存在指定的key,存在返回1,不存在返回0 expire key time 设置指定key的过期时间,可以使用ttl key查看剩余时间 pe ...

  10. 谷歌浏览器怎样把网页全部内容保存为.mhtml文件？

    Chrome保存.mhtml网页文件的方法: 在 Chrome 地址栏中键入chrome://flags,回车, 在页面搜索栏输入mhtml 把“Save Page as MHTML”项修改为 Ena ...