关于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. 在Mac上 python中使用tesseract OCR (Pytesser) 识别图片中的文字

    仓库地址:https://github.com/RobinDavid/Pytesser brew install tesseract sudo pip install opencv-python 安装 ...

  2. mysql创建表时符号``的作用

    新建表语句如下: CREATE TABLE `course` ( `id` bigint(20) NOT NULL AUTO_INCREMENT, `name` varchar(200) NOT NU ...

  3. git操作常见错误处理

    1.Error:The authenticity of host 'github.com (192.30.255.112)' can't be established. Git密钥认证github时出 ...

  4. python终端打印带颜色的print

    原理 实现过程:       终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关.       转义序列是以ESC开头,即用\033来完成(ESC的ASCII码用十进制表示 ...

  5. 266B

    #include <stdio.h> #define MAXSIZE 1024 char que[MAXSIZE]; int main() { int n, t; scanf(" ...

  6. 【Assembly】-NO.88.Assembly.2.滴水逆向.1.002-【位运算及基础指令】-

    1.0.0 Summary Tittle:[Assembly]-NO.88.Assembly.2.滴水逆向.1.002-[]- Style:Java Series:Log4j Since:2018-0 ...

  7. leaflet实用插件整理

    leaflet实用插件整理: https://www.giserdqy.com/webgis/leaflet/4920/leaflet%E5%AE%9E%E7%94%A8%E6%8F%92%E4%BB ...

  8. form提交xml文件

    --为何ajax提交不了xml?--原因:Request.Form["Data"]这种获取参数方式,原本就不是mvc路由参数获取方式,这是Asp.net中webfrom页面获取参数 ...

  9. 队列ADT

    队列 队列是FIFO表,使用队列时在队尾(rear)插入元素,称之为入队(enqueue),以及在对头(front)删除并返回元素值,称之为出队(dequeue). 任何表的实现都可以用于实现队列结构 ...

  10. 下拉选择插件select2赋值、创建、清空

    在select2中,设置指定值为选中状态 $("#select2_Id").val("XXXXX").select2()或者$("#latnId&qu ...