标签:current css 页面 问题 actual off eve pre top
针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧
下面上HTML代码
<div class="left_footer">
<p 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元素就可以进行相关的函数操作了
下面我们直接上js代码:
其中的element的意思是代表的是我们需要判断的这个节点
函数的返回值就是我们所得到的距离值
getElementTop(element) { var actualTop = element.offsetTop; //这是获取元素距父元素的的距离 var current = element.offsetParent; //这是获取父元素 while (current !== null) { //当它上面有元素时就继续执行 actualTop += current.offsetTop; //这是获取父元素距它的的父元素左上角的距离 current = current.offsetParent; } return actualTop; },
标签:current css 页面 问题 actual off eve pre top
原文地址:https://www.cnblogs.com/dy105525/p/12272072.html