javascript - 如何在 d3 或 native javascript API 中获取元素的 css 位置

Question

我有一个 HTML5 列表

当我点击每一个

时，我想获取

元素的绝对位置/相对位置。因为我使用的是 d3.js 和 angular.js

我尝试过原生 javascript API 和 d3.js

 var d = document.querySelectorAll('#a1');          

 console.log('select index  ', d3.selectAll( '#a1' ).attr('x'), d.offsetLeft, d.offsetTop);

但是代码好像不行

Answer 1

如果没有框架，确定 DOM 元素的位置可能会很棘手，因为这个元素可以绝对定位，或者嵌入到另一个具有自己偏移量的元素中。

编写一个函数来遍历元素的父元素，一直到文档根目录，并将顶部和左侧的偏移值相加，作为一个非常基本的实现。

function MyPosX(node,x){
  if (node.parentNode==document.body) return node.offsetLeft;
  return x+MyPosX(node.parentNode.offsetLeft,x);
}

alert(MyPosX(document.getElementById('test'),0));

请仔细检查父指针和边界条件。以上代码仅供引用。