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中的％，但它不会更改样式宽度。这个问题在样式标签中是deffinatly，我尝试过像

这样的东西

style="width: #progressbar"

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

Answer 1

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

要更改样式宽度：

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

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

Answer 2

您正在更改innerHTML而不是元素的样式。您可以尝试以下方式：

var x = document.getElementById("progressbar");
x.innerHTML = ....; // change the inner HTML
x.style.width = ...; // change the width...

Answer 3

.style.width = data["player"]["rank"]["next"].relProg+'%';

如果需要，请将其设为字符串。

Answer 4

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

带有ID的HTML Style类？

4 个答案: