gpt4 book ai didi

javascript - 用变量设置图像的宽度

转载 作者:行者123 更新时间:2023-11-28 00:05:41 25 4
gpt4 key购买 nike

我正在创建一个排名条形图,其中包含同一条形图像的五次迭代。我想用一个实际上是百分比的变量来更改每个条形的宽度。我可以通过将每个百分比作为每个图像的宽度来轻松做到这一点。就像....

<!DOCTYPE html>
<html>
<body>
<table width="100%" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td width="20%" >5 stars</td>
<td width="80%" bgcolor="#e2e2e2">
<img src="http://qr8.us/images/review-bar.jpg" width=80% height="10" alt=""/>
</td>
</tr>
<tr>
<td >4 stars</td>
<td bgcolor="#e2e2e2">
<img src="http://qr8.us/images/review-bar.jpg" width=14% height="10" alt=""/>
</td>
</tr>
<tr>
<td >3 stars</td>
<td bgcolor="#e2e2e2">
<img src="http://qr8.us/images/review-bar.jpg" width=3% height="10" alt=""/>
</td>
</tr>
<tr>
<td >2 stars</td>
<td bgcolor="#e2e2e2">
<img src="http://qr8.us/images/review-bar.jpg" width=2% height="10" alt=""/>
</td>
</tr>
<tr>
<td >1 star</td>
<td bgcolor="#e2e2e2">
<img src="http://qr8.us/images/review-bar.jpg" width=1% height="10" alt=""/>
</td>
</tr>
</tbody>
</table>
</body>
</html>

但是,我想将该宽度作为百分比应用于我在其他地方计算的变量。变量看起来像...

var ttlrevsprcntfive = 80;
var ttlrevsprcntfour = 14;
var ttlrevsprcntthree = 3;
var ttlrevsprcnttwo = 2;
var ttlrevsprcntone = 1;

我已尽一切努力让变量在每个图像的宽度属性中工作。极大的失败。

如何将每个变量的值分配给图像宽度?请记住它是一个百分比。谢谢

最佳答案

这可能就是您正在寻找的。工作 fiddle here

'use-strict';
(function(){
function resize() {
var img = document.getElementsByTagName('img');
for(var i=0;i<img.length;i++) {
img[i].style.width = 20 + '%';
img[i].style.height = 20 + '%';
}
}
}());

关于你的评论,我已经用你的html源代码做了一个例子。请参阅更新的 fiddle here这应该可以完成工作。如果您满意,请接受此解决方案作为正确答案,然后单击帖子左侧的箭头。

关于javascript - 用变量设置图像的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31363240/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com