ID为的HTML样式类

HTML Style class with ID?

本文关键字：样式 HTML 为的 ID      更新时间：2023-09-26

我目前有一个工作网站，其中包含一个使用Bootstrap的进度条。我还有一个ID，它以以下格式从JSON URL加载数据：http://api.bfhstats.com/api/playerInfo?plat=pc&name＝1ApRiL&输出=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="width: #progressbar"

然而，这并不奏效。看起来很奇怪，文本是有效的，但不是实际的宽度。

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

更改样式宽度：

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

您更改的是innerHTML，而不是元素的样式。你可以试试这样的东西：

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

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

如果需要，把它做成字符串。

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