javascript - 带有 ID 的 HTML 样式类？

Question

我目前有一个工作网站，其中包含使用 Bootstrap 的进度条。我还有一个 ID，它以下列格式从 JSON URL 加载数据:http://api.bfhstats.com/api/playerInfo?plat=pc&name=1ApRiL&output=js

在我的页面顶部，我有以下进度条代码:

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  
style="width: 60%" id="progressbar">60%
</div>
</div>

和底部的脚本:

document.getElementById("progressbar").innerHTML = data["player"]["rank"]["next"].relProg+'%';



                }

进度条以字符串格式获取所需数据，因此它可以正确显示来自 JSON 的 %，但不会更改样式宽度。问题肯定在 style 标签内，我尝试了

style="width: #progressbar"

但是这不起作用。文本有效，但实际宽度无效，这似乎很奇怪。

Answer 1

您必须在从服务器获取百分比 进度数据后使用document.getElementById("progressbar").style.width 手动更改进度条的宽度。

改变样式宽度:

var percentage = data["player"]["rank"]["next"].relProg,
    progressbar = document.getElementById("progressbar");

progressbar.innerHTML = percentage+'%';
progressbar .style.width = percentage+'%';