javascript - JavaScript - 基于值的 CSS 宽度

Question

我用两个酒吧设置了一些小东西：

<div class="bars">
<div class="bar bar-1" value="15"></div>
<div class="bar bar-2" value="7.5"></div>
</div>

我希望最大的条（按值）始终保持 100% 的宽度，并且较小的条相应地缩放。在此示例中，bar-2 将是 bar-1 大小的一半。

标签： javascriptcss

Answer 1

这是一个使用您的代码的非常简单且“快速而肮脏”的解决方案 - 因为您没有提供更多信息

https://jsfiddle.net/b53pzfdj/

// get all bars
var bars = document.getElementsByClassName('bar')

// determine the highest value
var longest = 0;

for (var bar of bars) {
    if (parseInt(bar.getAttribute('value')) > longest) {
        longest = parseInt(bar.getAttribute('value'));
    }
}

// set width relative to the highest value for each bar
for (var bar of bars) {
    bar.style.width = `${parseInt(bar.getAttribute('value')) / longest * 100}%`;
}