Блог

Главная - Вопросы по программированию - Настройка высоты и ширины элемента в rems с помощью javascript

Настройка высоты и ширины элемента в rems с помощью javascript

#javascript #css #dom

#javascript #css #dom

Вопрос:

Как я могу установить ширину / высоту элемента в rems с помощью javascript?

Это то, что я пытаюсь сделать:

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

Похоже, это не работает, а width / height имеет значение 0

Комментарии:

1. вы, вероятно, хотите использовать img.style.width — .width это атрибут ширины изображения элемента html, который принимает только целые числа без единиц измерения

2. Проверьте developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width , как сказал @Pete, img.width и img.height принимают только числа без единиц измерения. Они станут значениями пикселей.

3. Итак, я думаю, мне придется выполнить преобразование вручную… странно 🙂

Ответ №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);