如何在 d3 或本机 javascript API 中获取元素的 css 位置答案

【问题标题】：How to get element 's css position in d3 or native javascript API如何在 d3 或本机 javascript API 中获取元素的 css 位置
【发布时间】：2014-03-05 03:56:57
【问题描述】：

我有一个 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);

但代码似乎不起作用

【问题讨论】：

标签： javascript css d3.js

【解决方案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));

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

【讨论】：

【解决方案2】：

querySelectorAll 返回一个非实时 NodeList，因此，要真正选择您需要的元素，您必须包含如下索引：

var d = document.querySelectorAll('#a1')[0]; //assuming that there is an element with this ID

不过，在这种情况下使用 document.getElementById("a1") 会容易得多。

var d = document.getElementById("a1");

More info on getElementById

Potential duplicate question

【讨论】：