关于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. nginx安装lua模块实现高并发

    nginx安装lua扩展模块 1.下载安装LuaJIT-2.0.4.tar.gz wget -c http://luajit.org/download/LuaJIT-2.0.4.tar.gz tar ...

  2. ORACLE---OCP培训

    闪回恢复区 SYS@orcl>show parameter recov; NAME         TYPE  VALUE------------------------------------ ...

  3. [js]设计模式小结&对原型的修改

    js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...

  4. Mysql导入表信息[Err] 1067 - Invalid default value for '字段名'

    修改mysql配置文件 vi /etc/my.cnf //添加以下配置 sql_mode=ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISI ...

  5. openshift 容器云从入门到崩溃之十《容器监控-数据展示》

    POD资源历史曲线(CPU.内存.网络) 监控方案heapster+hawkular-metrics+hawkular-cassandra heapster负责收集数据 hawkular-cassan ...

  6. IDEA eclipse转maven

    在pom.xml 文件上右键 Add as Maven Project

  7. chrome下调试安卓app 之 ionic

    打开chrome浏览器,输入chrome://inspect/#devices,将安卓手机插入电脑上,打开手机设置 打开 开发者调试usb调试 ,网页上会出现 input 点击, 就会看见consol ...

  8. Java基础（认识Java）

    我们要学习Java那么就要首先认识一下Java: Java是什么 Java是由Sun Microsystems公司于1995年5月推出的Java面向对象程序设计语言和Java平台的总称.由James ...

  9. SQL Server 2008 报表服务入门【转】

    转http://www.cnblogs.com/YZDONET/archive/2012/08/17/2644711.html 概述 上周,Tim与我们分享了SQL Server 2008 报表服务的 ...

  10. excel 八位二进制转换为十六进制公式

    =BIN2HEX(C16&D16&E16&F16&G16&H16&I16&J16,2)