檢索到動態添加元素頂部的距離

Question

在我的情況下，我正在動態添加按鈕。每個添加的按鈕都有不同的類別。我設置了樣式規則，以便每個後續按鈕都放置在前一個按鈕的下方。所以，我需要的是找到每個按鈕頂部的距離，以便稍後用於邏輯。

我嘗試了兩種方法在下面的代碼中檢索到頂部的距離。第一次使用原生的JavaScript，我存儲爲：var = h。第二次我嘗試了更多的D3方法，我將其存儲爲：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。哦，其實，一個給了我一個錯誤，另一個返回undefined。

Answer 1

在你D3的方法你只需要this，不d3.select(this)，它會返回一個D3的選擇：

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：

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>