JS开发中获取元素的函数
来源:爱站网时间:2020-07-08编辑:网友分享
在开发中都会出爱心很复杂的页面,通常这种情况我们要使用元素的位置和大小进行计算,为了让项目达到我们想要的效果,我们需要学习到更多的知识,别着急,下面是爱站技术频道小编为大家带来的介绍JS开发中获取元素的函数。
在开发中都会出爱心很复杂的页面,通常这种情况我们要使用元素的位置和大小进行计算,为了让项目达到我们想要的效果,我们需要学习到更多的知识,别着急,下面是爱站技术频道小编为大家带来的介绍JS开发中获取元素的函数。
JavaScript中提供获取HTML元素位置的属性:
HTMLElement.offsetLeft
HTMLElement.offsetHeight
但 是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。那么如何得到一个HTML元素的绝对位置呢,可以用以下函数:
//获取元素的纵坐标
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
其原理就是利用HTMLElement.offsetParent属性,如果当前元素的父元素不是空(null),则在原本的offsetTop基础上加上当前的offsetTop,然后继续获取父元素的父元素的offsetTop,再将其加之,最终递归出该元素相对于整个浏览器画布的纵坐标。横坐标亦然。
上述是爱站技术频道小编为大家带来的JS开发中获取元素的函数,如果想超越自己的话,可以在上述介绍中进行改进操作。