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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>原生JS获取DOM 节点到顶部/最左部的距离</title>

</head>

<body>

   <ul>

       <li>11111</li>

       <li>11111</li>

       <li>11111</li>

       <li>11111</li>

       <li id="item">11111</li>

   </ul>

    <script>

        var dom = document.getElementById('item');

        var iTop = 0,iLeft=0;

        do {

            iTop += dom.offsetTop;//如果是左侧就是offsetLeft
　　　　　　　iLeft +=dom.offsetLeft
            dom = dom.parentNode //如果DOM 节点 的parentNode存在，把当前的节点赋予成parentNode；

       } while (dom.parentNode);

        console.log('到顶部的距离是'+iTop+'px','到最左侧的距离是'+iLeft+'px')

    </script>

</body>

</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. 构造方法 this super

    1 构造方法 1.1 构造方法Constructor概述创建对象要明确属性值,此时需要用到构造方法,即对象创建时要执行的方法,用来给对象的属性进行初始化.在new对象时,知道其执行的构造方法是什么,就 ...

  2. python基础之 列表，元组，字典

    other help(str.strip) #查看是否有返回值以及返回值类型[] :称为索引操作符 1.列表 列表相比字符串来说能存储大量数据的python的基本数据类型,并且也拥有字符串的一些方法( ...

  3. Hbaseflush处理流程

    Hbaseflush处理流程 flush的处理是个生产者消费者模式,通过MemStoreFlusher.requestFlush或者requestDelayedFlush来收集请求,通过多个Flush ...

  4. ASP.net MVC5 Code First填充测试数据到数据库

    问题的产生  最近在看Adam Freeman的“Pro ASP.NET MVC5”,于是在工作机上面搭建了相应的运行环境,但是在自己的机器上面只有代码,没有数据库.记得在code first中可以新 ...

  5. Painter's Problem （高斯消元）

    There is a square wall which is made of n*n small square bricks. Some bricks are white while some br ...

  6. The type groovy.lang.GroovyObject cannot be resolved

    很明显是:编译 Groovy 不通过 解决办法:添加 Groovy 包 比如 maven 项目里: <dependency> <groupId>org.codehaus.gro ...

  7. C语言实例：函数指针

    函数指针:函数指针数组的使用: 不带参数和返回值的函数指针: #include <stdio.h> #include <stdlib.h> //定义一个没有返回值也没有入口参数 ...

  8. ubuntu kylin18 安装NVIDIA驱动

    这几天装系统快被折腾死了,事情的起因是这样的. 这件事情发生之前那两天一直在调试oled屏幕.我自己做转接板,1.3寸30针fpc的接口. 由于没有使用fpc专用转接座子,导致焊接特别困难,索性最后牺 ...

  9. Bugku-CTF之点击一百万次

    Day16 点击一百万次 http://123.206.87.240:9001/test/ hints:JavaScript  

  10. asp.net json,对象,字符串的相互转换

    //object 转json格式字符串 public static string ObjectToJsonString(this object obj) { return JsonConvert.Se ...