无法获得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进度条。我有一条垂直线表示条形图的平均值（而不是实际进度）。要计算放置该行的位置，我想得到＆＃34; risktakertotal＆＃34;的总宽度。并将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的进度类）。我有另一个选择来获得＆＃34;＃risktaker＆＃34;的宽度。像素。但是，在我的javascript中，我按百分比设置元素，因此我使用的任何函数都返回＆＃34;＃risktaker＆＃34;的宽度。百分比。

Answer 1

你试过这个吗？

document.getElementById("risktakertotal").offsetWidth

如果我错了，请纠正我

我要等到有人在尝试之前确认我是对的。

Answer 2

您必须在其他地方出错，因为以下工作正常。

$('#risktakertotal').width();

您可以在此代码中看到：http://codepen.io/anon/pen/MeJxmx。

Answer 3

嗨，请参考这个plunker https://plnkr.co/edit/fyByiAP9qc7Rb0CdlIGe?p=preview

// Add your javascript here
$(function(){
 console.log($('#risktakertotal').width())
});

检查包含的jquery或不检查屏幕截图