07/18
2024
如果有两个或多个处在同一层级的元素,怎么用 JavaScript 判断它们的先后顺序呢?可以使用 compareDocumentPosition API。
JavaScript 使用 compareDocumentPosition 判断两个元素的位置关系(前后顺序)
04/24
2015
JavaScript中有获取HTML元素位置的属性:
HTMLElement.offsetLeft
HTMLElement.offsetHeight
但是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其父元素左上角为(0,0)点从而计算出的数值。我们可以用以下函数获得元素在页面中的绝对位置:
//获取元素的纵坐标 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; }
其原理是判断元素有父元素的话,将父元素位置的数值加起来,实现过程就是if语句后调用函数自身的那句代码。这样最终就可以得到元素距离页面顶部的绝对位置。