Bootstrap獲取div列的寬度（以像素為單位）

Question

我正在設置一個帶引導程序的頁面。 我的布局工作得很完美，但其中一個元素是美國的可縮放地圖（使用d3）。 我正在使用的縮放功能需要div的寬度和高度（以像素為單位），以便計算如何平移和縮放地圖。 我已經嘗試過使用百分比，但我無法做到這一點。 有沒有辦法動態獲取div的高度和寬度。 我已經搜索了所有搜索條件過於通用（或者我不夠聰明，無法正確地說出來）。

或者，如何獲得必要的值。

這是我使用硬編碼寬度和高度的實現（如果頁面調整大小，則不起作用）。

//make the map element
    var width = 1000;
    var height = 1000;
    var svg = d3.select("#Map")
    .append("svg")
    .attr("id", "chosvg")
    .attr("height", height)
    //.attr("viewBox", "0 0 600 600")
    .attr("width", width)
    .style("preserveAspectRatio", "true");

    cbsa = svg.append("g");
d3.json("data/us-cbsa.json", function(json) {
    cbsa.selectAll("path")
        .attr("id", "cbsa")
        .data(json.features)
        .enter()
        .append("path") 
        .attr("class", data ? quantize : null) //data ? value_if_true : value_if_false -- ternary operator
        .attr("d", path)
        .on("click", clicked);
});

在clicked（）函數中，我有這樣的縮放工作，但只有一定的窗口寬度

        cbsa.transition()
        .duration(750)
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
        .style("stroke-width", 1.5 / k + "px");

為清楚起見，我理所當然地喜歡以下內容：var width = column.width（）//或使用百分比的東西

如果它有幫助，我也可以包含我的HTML。

Answer 1

您可以通過調用以獲取列的寬度：

var bb = document.querySelector ('#Map')
                    .getBoundingClientRect(),
       width = bb.right - bb.left;

根據瀏覽器的不同， bb可能已經有了width屬性。 請記住，列可能看起來更寬，因為svg的初始大小太大，因此其父列也可能是蜜蜂。

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect