检索到动态添加元素顶部的距离 [英] Retrieving Distance to Top of a Dynamically Added Element

问题描述

就我而言，我是在动态添加按钮.添加的每个按钮都有一个不同的类.我设置了样式规则，以便将每个后续按钮放置在上一个按钮下方.因此，我需要找到每个按钮到顶部的距离，以便以后将其用于逻辑.

In my case, I'm adding buttons dynamically. Each button that is added has a different class. I have style rules set up so that each subsequent button will be placed below the previous button. So, what I need is to find the distance to top to each button in order to use it later for logic.

我尝试了以下两种方法来检索到顶部的距离.第一个使用本机javascript，我将其存储为:var = h.第二次，我尝试了更多的D3方法，并将其存储为:var = h2.

I tried two ways to retrieve the distance to top in the code below. the first using native javascript, which I stored as: var = h. The second time around I tried more of a D3 approach, which I stored as: var = h2.

d3.select('body').append('button')
    .text('X')
    .attr('id','button'+(intCount+1))
    .attr('class',choice+'1')
    .on('click', function(d,i) {
    var t = d3.select(this).attr('id')
    var c = d3.select(this).attr('class')
    var h = document.getElementByID(t).offsetTop;
    var h2 = d3.select(this).offsetTop
      var thisChoice = choice;

      d3.selectAll('.' + t).remove();
      d3.selectAll('.'+ thisChoice+'1').remove();
      intCount -= 1;
      count -= .7;
    });

这两个都在控制台日志中返回null.哦，实际上，一个给了我一个错误，另一个给了我未定义的提示.

Both of these return null in the console log. Oh actually, one gave me an error, and the other returned undefined.

推荐答案

在您的 D3方法中，您只需要this，而不是d3.select(this)，这将返回D3选择:

In your D3 approach you only need this, not d3.select(this), which will return a D3 selection:

d3.select('body').append('button')
  .text('X')
  .on('click', function() {
    var h2 = this.offsetTop;
    console.log(h2)
  });

<script src="https://d3js.org/d3.v4.min.js"></script>

关于您的原生JS方法，您有一个错字:它是getElementById，而不是getElementByID:

Regarding your native JS approach, you have a typo: it is getElementById, not getElementByID:

d3.select('body').append('button')
  .text('X')
  .attr("id", "foo")
  .on('click', function() {
    var t = d3.select(this).attr("id");
    var h = document.getElementById(t).offsetTop;
    console.log(h)
  });

<script src="https://d3js.org/d3.v4.min.js"></script>

这篇关于检索到动态添加元素顶部的距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！