关于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. 10.9-uC/OS-III任务管理

    1.OSTaskCreate () 要使用 uC/OS 的任务必须先声明任务控制块和创建任务,调用 OSTaskCreate () 函数可以创建一个任务. 2.OSTaskSuspend () OST ...

  2. 点击鼠标出现漂浮字体("自信", "自强", "坚持"...)效果实现

    前面我们谈到了漂浮磁力线/鼠标吸铁石特效你也可以实现,现在来聊聊点击鼠标出现漂浮字体("自信", "自强", "坚持"...)效果的实现,这 ...

  3. C++提供的四种新式转换--const_cast dynamic_cast reinterpret_cast static_cast

    关于强制类型转换的问题,许多书都讨论过,写的最具体的是C++之父的<C++的设计和演化>. 最好的解决方法就是不要使用C风格的强制类型转换,而是使用标准C++的类型转换符:static_c ...

  4. byte转bit

    由于项目需要,传过来的数据是高位到低位的Byte,需要输出低位到高位的bool数组. public static bool[] getBits(byte[] byt) { bool[] ret = n ...

  5. [OpenCV]直线拟合

    OpenCV实现了直线的拟合. CV_IMPL void cvFitLine( const CvArr* array, int dist, double param, double reps, dou ...

  6. Oracle 10g收集数据库统计信息

    1.需求概述 2.实施步骤 3.回退方案 1.需求概述 某数据库由于整体统计信息不准确,多次出现部分业务SQL选错执行计划,从而导致性能下降影响到最终用户体验,目前通过SQL_PROFILE绑定执行计 ...

  7. Gitlab+Jenkins实现自动部署

    Gitlab+Jenkins实现自动部署   系统环境: Gitlab主机 IP:192.168.1.2 Jenkins主机 IP:192.168.1.3 一.为何要做自动部署 #部署Tomcat的在 ...

  8. 无需激活直接同步登入discuz，php代码（直接可用）

    <?php /** * 抽奖 * @param int $total */ function getReward($total=1000) { $win1 = floor((0.12*$tota ...

  9. python locust 性能测试：locust参数-保证并发测试数据唯一性，循环取数据

    from locust import TaskSet, task, HttpLocustimport queue class UserBehavior(TaskSet): @task def test ...

  10. P1605 迷宫

    P1605 迷宫 这是一道毒瘤题... 这是一道广搜题 bfs ... 代码: #include<cstdio> #include<iostream> #include< ...