带ID的HTML风格类？

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

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

<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，但它不改变风格的宽度。问题是在风格标签definatly，我试过的东西，如

style="width: #progressbar"

但是，这是行不通的。似乎很奇怪，文本的作品，但不是实际的宽度。

来源

2015-04-04 Stewartps

当我这样做，进度条的前消失了，像这样：[链接]（http://i.gyazo.com/394353e23e5695ae6bd009d520353b72.png） – Stewartps 2015-04-04 11:12:46

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

要更改样式宽度：

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

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

来源

2015-04-04 11:11:51 mohamedrias

谢谢！这完成了工作！ – Stewartps 2015-04-04 11:14:26

不客气:) – mohamedrias 2015-04-04 11:15:29

您正在改变元素的innerHTML不是风格。您可以尝试类似：

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

来源

2015-04-04 11:13:21

它是getElementById而不是getElementByID – mohamedrias 2015-04-04 11:14:45

谢谢，这已解决了问题。 – Stewartps 2015-04-04 11:15:32

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

使其字符串，如果需要。

来源

2015-04-04 11:16:33

非常感谢你，.style.width做了诀窍 – Stewartps 2015-04-04 11:17:40

你很好。 – 2015-04-04 11:19:12

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

来源

2015-04-04 11:17:34 khv2online

带ID的HTML风格类？

回答

相关问题