使用变量设置图像的宽度答案

【问题标题】：Set width of an image with a variable使用变量设置图像的宽度
【发布时间】：2015-09-30 12:42:12
【问题描述】：

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

<!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;

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

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

【问题讨论】：

标签： javascript html css image width

【解决方案1】：

这可能是您正在寻找的。工作小提琴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 源代码做了一个例子。查看更新的小提琴here 这应该可以完成这项工作。如果您满意，请接受此解决方案作为正确答案，然后单击帖子左侧的箭头。

【讨论】：

【解决方案2】：

您究竟是如何尝试应用该值的？

您可以做到这一点，例如通过这样做：

YourImageObject.style.width = ttlrevsprcntfive + "%";

你可以得到 YourImageObject 例如通过 document.getElementsByTagName("img")[imageIndex] 或 document.getElementById('imageId') 或使用 JQuery。

【讨论】：

谢谢汉斯。我不确定你最后一句话是什么意思。您是否将 YourImageObject.style.width 用作简单的 VAR？
你可以创建一个变量来存储 document.getElementsByTagName('theTagName')[tagIndex] 的结果，然后访问它的样式属性。你可以在@fubbe 的帖子中看到一个例子。
很抱歉，我无法将您的答案或 fubbe 的示例与我的问题联系起来。我知道答案就在那里，但我看不到它。 Fubbe 的示例包括其他让我感到困惑的问题（如按钮和调整大小）您能否使用我提供的代码为我提供更完整的答案？我的变量是：var ttlrevsprcntfive = 80;我希望图像的宽度是百分比值。我不明白 YourImageObject.style.width 的目的，对不起，我认为这会更容易。
YourImageObject 只是我采用的一些随机变量。也许这个 JavaScript 代码可以帮助你： document.getElementsByTagName("img")[0].style.with = ttlrevsprcntfive + "%"; （此代码将 html 文档中第一个图像元素的宽度设置为变量 ttlrevsprcntfive 的值加上“%”（该值的类型为 String））。如果您在理解 JavaScript 中对 HTML 元素（标签）的访问时遇到困难，您可以阅读以下内容：w3schools.com/js/js_htmldom_methods.asp
现在我想我们已经做到了。您的代码有所帮助。但是，您说...（此代码将 html 文档中第一个图像元素的宽度设置为变量 ttlrevsprcntfive 加上“%”的值）。页面上还有许多其他图像。如何将其应用于特定图像？看到这个小提琴...jsfiddle.net/jdjackson7/qnpsL3n9