zoukankan      html  css  js  c++  java
  • 关于js获取元素在屏幕中的位置的方法

    针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧

    下面上HTML代码

    <div class="left_footer">
       <p class="p1" data-num="1" ref="data" @mouseenter="mOver($event)" @mouseleave="mOut($event)">上</p>
       <p data-num="2" ref="data" @mouseenter="mOver($event)" @mouseleave="mOut($event)">右</p>
       <p data-num="3" ref="data" @mouseenter="mOver($event)" @mouseleave="mOut($event)">左</p>
    </div>

    我拿上面的代码来简单举下例css代码我就不上了,在这里不影响

    在上面我需要获取到对应的DOM元素就可以进行相关的函数操作了

    这里的话比如说获取第一个p元素

    var element = document.querySelector(".left_footer .p1");

    接下来直接将element传入函数即可

    下面我们直接上函数代码:

      其中的element的意思是代表的是我们需要操作的这个节点,我们只需要把对应的节点传入即可

      函数的返回值就是我们所得到的距离值

    function getElementTop(element) {
          var actualTop = element.offsetTop;    //这是获取元素距父元素顶部的距离
          var current = element.offsetParent;   //这是获取父元素
          while (current !== null) {      //当它上面有元素时就继续执行
            actualTop += current.offsetTop;   //这是获取父元素距它的父元素顶部的距离累加起来
            current = current.offsetParent;  //继续找父元素
          }
          return actualTop;   
        },

     以上就是如何获取顶部的值,那么获取距左边的距离道理也是一样的,这里我就不在多说了哈

  • 相关阅读:
    疫情控制
    2020 CSP-J 多校赛 Day 2 T2 题解
    三校联考-水题狂欢信心赛
    QBXT 提高组储备营 2020.夏 游记
    【题解】(我出的题)XM捡面筋
    【题解】P4025 [PA2014]Bohater
    【题解】1644:【例 4】佳佳的 Fibonacci
    【题解】CF1165F2 Microtransactions (hard version)
    P2261 [CQOI2007]余数求和
    OVO——扶咕咕的20道CF
  • 原文地址:https://www.cnblogs.com/dy105525/p/12272072.html
Copyright © 2011-2022 走看看