jQuery获取图像的累积高度并根据像素偏移调整其高度

Question

我需要为weasy print pdf构建一个基于html的堆叠条形图。我这样做是通过将分数百分比分配给颜色块图像。第三方库不是一种选择。这适用于我必须支持的所有浏览器，因为它们围绕小数百分比来支持Safari。因为数据是准确的，这只是一个小小的眼睛...我只是想“陪审团钻机”它。

1. 我知道我的条形图高度始终是600px
2. 我需要合并所有图像的总高度（比如它是595px）
3. 因为这是百分比，所以我不能只获得包装height()
4. 在获得高度剩余后，我想迭代遍历每个图像，将其高度设置为height() + 1px，直到我们达到600px总计。在我的示例中，这将意味着迭代5个图像，每个图像增加1px。

GOOD Bar-Chart VS. Safari Bar-Chart



示例HTML：

<div class="bar-container">
    <div class="inner-barstack">
        <img src="my/color-square" style="height:41.5%" alt="Bifid... 41.5%">
        <img src="my/color-square" style="height:39.32%" alt="Clost... 39.32%">
        <img src="my/color-square" style="height:0.68%" alt="Corio... 0.68%>
        <img src="my/color-square" style="height:0.5%" alt="Veill... 0.5%">
        <img src="my/color-square" style="height:0.5%" alt="Enter... 0.5%">
        <img src="my/color-square" style="height:0.5%" alt="Bacte... 0.5%">
        <img src="my/color-square" style="height:17%" alt="Lacto... 17%">
    </div>
</div>

示例CSS：

.bar-container {
    height: 600px;
    width: 80px;
}
.inner-barstack {
    height: 100%;
    width: 100%;
}
.inner-barstack img {
    width: 100%;
}

Answer 1

如果您需要明确定义高度，可以将百分比存储在数据属性中并直接指定高度。

<img src="my/color-square" data-pct="41.5" alt="Bifid... 41.5%">

<script>
var imgs = document.querySelectorAll('[data-pct]')
var len = imgs.length
var i = -1
var t, pct

while(++i < len){
   t = imgs[len]
   pct = parseFloat(t.getAttribute('data-pct'))/100
   t.style.height = [pct * 600, 'px'].join("")
}
</script>