javascript - 无法获取div的宽度

Question

<tr>
  <td style = "padding-left: 2%; padding-right: 2%;">
    <span style="padding: 3px; float: left; margin-right:13px;">RISK TAKER</span>
    <div id = "risktakertotal" style= "margin: auto;" class="progress">
      <div id = "risktaker" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="color:black; width:0%; background-color: #0097a7;"></div>
      <div class="vertical-line" id = "risktakerAvg" style=""></div>
    </div>
  </td>
  <td id = "risktakerKB" ><h4></h4></td> 
  <td id = "risktakerS"><h4></h4></td>
</tr>

我有一个非常简单的表格，里面有一个 Bootstrap 进度条。我有一条垂直线表示条形图的平均值(不是实际进度)。为了计算放置该线的位置，我想获得“risktakertotal”的总宽度并将线的 margin-left 设置为该总宽度的百分比。

但是，使用 Javascript，我无法获得该 div 的宽度。我用过 .width()、.style.width、.offsetWidth 和我在网上能找到的任何其他东西，但都没有成功。有谁知道我可以做到这一点？或者我可以在没有总宽度的情况下移动这条垂直线的另一种方式？

编辑:

var riskTakerQuestions = data['risk taker'] ? data['risk taker'] : 0;
var riskTakerPercent = Math.round(riskTakerQuestions/11 * 100);
if(riskTakerPercent > 75) {
    riskTakerPercent = 100
    document.getElementById('risktaker').innerHTML = "Score exceeds 75%";
}
else{
    document.getElementById('risktaker').innerHTML = riskTakerPercent + "%";
    riskTakerPercent = riskTakerPercent / .75
}
document.getElementById('risktaker').style.width = riskTakerPercent + "%";
document.getElementById('risktaker').setAttribute("aria-valuenow", riskTakerPercent + "%");

var riskTakerAvg = 54;
if (riskTakerAvg > 75) {
    riskTakerAvg = 100;  
}
else {
    riskTakerAvg = riskTakerAvg / .75;
}
alert($('#risktakertotal').width());
alert(document.getElementById("risktakertotal").offsetWidth)

这是我的 javascript，供大家引用。一切都返回 0(这是 Bootstrap 的进度类)。另一个选项是获取“#risktaker”的宽度(以像素为单位)。然而，在我的 javascript 中，我根据百分比设置元素，因此我使用的任何函数都会以百分比返回“#risktaker”的宽度。

Answer 1

你试过了吗？

document.getElementById("risktakertotal").offsetWidth

如果我说错了请大家指正

我会说等到有人验证我是对的再尝试。