帶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風格類？

回答

相關問題