关于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. 快速构建一个使用axios的vue应用程序（转）

    英文原文:https://www.sitepoint.com/fetching-data-third-party-api-vue-axios/ 译文:https://segmentfault.com/ ...

  2. java框架之SpringCloud(4)-Ribbon&Feign负载均衡

    在上一章节已经学习了 Eureka 的使用,SpringCloud 也提供了基于 Eureka 负载均衡的两种方案:Ribbon 和 Feign. Ribbon负载均衡 介绍 SpringCloud ...

  3. [js]js的惰性声明, js中声明过的变量(预解释),后在不会重新声明了

    js的惰性声明, js中声明过的变量(预解释),后在不会重新声明了 fn(); // 声明+定义 js中声明过一次的变量,之后在不会重新声明了 function fn() { console.log( ...

  4. gitlab的ssh key有2个

    Gitlab添加SSH key可以pull不能push的问题 最后解决的是 使用http去clone pull  提交 没用ssh.就是需要输入密码

  5. C++ Windows API 读写INI文件

    BOOL WritePrivateProfileString( LPCTSTR lpAppName, // INI文件中的一个字段名[节名]可以有很多个节名 LPCTSTR lpKeyName, // ...

  6. day08 python之函数初识

    一,什么是函数? 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率.你已经知道Python提供了许多内建函数,比如print(),len( ...

  7. cookies增删改擦操作

    //判断是否存在名为aaa的cookie function hasSetCookie(name){ var strCookie = document.cookie; var arrCookie = s ...

  8. Python 第五阶段 学习记录之---Django 基础

    Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. ...

  9. python hello 的三种方法

    1)直接 print("hello") 2)使用main函数: def main(): print("Helloa你好") if __name__ == &qu ...

  10. Android开发中使用Intent跳转到系统应用中的拨号界面、联系人界面、短信界面

    现在开发中的功能需要直接跳转到拨号.联系人.短信界面等等,查找了很多资料,自己整理了一下. 首先,我们先看拨号界面,代码如下: Intent intent =new Intent(); intent. ...