使用 javascript 以 rems 为单位设置元素的高度和宽度

Question

如何使用 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

Answer 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);