使用javascript在rems中设置元素的高度和宽度答案

【问题标题】：Setting height and width of element in rems using javascript使用javascript在rems中设置元素的高度和宽度
【发布时间】：2021-09-01 00:04:03
【问题描述】：

如何使用 javascript 以 rems 为单位设置元素的宽度/高度？

这就是我想要做的：

    function generateProgressItems(count)
    {
        console.log("doing it...");
        let container = document.getElementById("progress-container");
        for(var i=0; i<count; ++i)
        {
            console.log("creating image");
            let img = document.createElement('img'); 
            img.src =  'lock_closed.png'; 
            img.width = "100rem";
            img.height ="100rem";
            container.appendChild(img); 
        }
    }

这似乎不起作用，宽度/高度设置为 0

【问题讨论】：

你可能想使用img.style.width - .width 是html元素图像宽度属性，它只接受没有单位的整数
查看developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width，正如@Pete 所说，img.width 和img.height 只接受无单位数字。这些将成为像素值。
所以，我想我将不得不手动进行转换......奇怪:)

标签： javascript css dom

【解决方案1】：

这应该可行。我添加了背景颜色，因此即使由于某种原因 PNG 没有加载，您也可以看到图像的空间。

function generateProgressItems(count) {
    "use strict";

    let container = document.getElementById("progress-container");

    for (var index=0; index < count; ++index) {
    
        let img = document.createElement("img"); 
        img.src =  "lock_closed.png"; 
        img.style.background = "blue";
        img.style.width = "2rem"; //100rem is fine too
        img.style.height ="2rem"; //but it's huge.
        container.appendChild(img); 
    }
}

generateProgressItems(5);

【讨论】：