如何自动更改进度条的span / div宽度？

Question

我制作了这个简单的html片段：<div class="progress-bar"></div>，然后我设计了它：

.progress-bar {
    background-color: #DFDFDF;
    height: 24px;
    margin-bottom: 6.66667px;
    margin-left: -2px;
    margin-top: -22px;
    z-index: 1;
}

此外：

<li>
<span class="name">
<a>theme</a>
</span>
<span class="value"> <?=$howtsrg?></span>
<div class="progress-bar"></div>
</li>

<?=$howtsrg?> =从数据库中获取的值

现在，我想给这个进度条一个宽度，但这必须是自动的，具体取决于从数据库中获取的值。例如，我现在有一个列表，其中值 7和值2 ...我希望进度条的宽度不同，因为它们没有相同的值。我怎样才能做到这一点？我找不到相关的 jQuery 脚本。

PS：列表值是动态的，并且会随着天数的变化而变化！所以7和2可以是15和22！

Answer 1

就这样做。比如，你有一个像72这样的值。你可以使用jQuery这样做：

$(".progress-bar").css("width", "75%");

或者，您可以这样做：

$(".progress-bar").width("75%");

您需要提供px：更改宽度：<?=$howtsrg?>px;

Answer 2

您可以使用百分比：

$('.progress-bar').width('50%');

要定位单个进度条，您需要给它们id或使用适当的选择器选择它们。