Как добавить элементу стили из объекта?

Question

[nonamefromkz]

Помогите, пожалуйста, понять как написать эту функцию? Пробовала разными(неправильными видимо) способами.
P.S.не кидайте тапкой, я только учусь

Написать функцию applyStyles, которая принимает в себя объект с парами ключ-значение, где ключ - название css-свойства, записанного в формате camelCase, а значение - значение этого свойства

<h1 class="my-title"> Привет, я заголовок</h1>

const myTitle= document.querySelector('.my-title');

    function applyStyles(element, styles ) {
       ПАМАГИТИ
    }

    applyStyles( myTitle, {
        "color": "red",
        "border": "1px solid blue",
        "backgroundColor": "lightblue",
        "padding": "24px"
        }
    );

Comments

[Михаил Р.]

Шта?

[Rsa97]

Напрямую менять стиль элемента можно, но нехорошо. Правильный способ, в большинстве случаев, использование классов с привязанными правилами CSS.

Answer 1

[Алексей Уколов]

Даю удочку, не рыбу. Тут три составляющих:

• Итерация по ключам-значениям объекта. Способов несколько, все описаны на первых страницах любого учебника.
  
• Сохранение значения конкретного стиля. Тоже элементарно: element.style.backgroundColor = value.
  
• Использование переменной в качестве названия свойства. Тоже на первых страницах учебника.
  

Но перед этим нужно раз и навсегда уяснить разницу между массивом и объектом в js и использовать корректные термины.

Comments

[Михаил Ливач]

Итерация необязательна, есть Object.assign() .
Так что отдельня функция не особо нужна, тут одна строчка кода

[Алексей Уколов]

Михаил Ливач, это же явно задание из учебника, поэтому и высосанное из пальца.

[Михаил Ливач]

Алексей Уколов, раз человек учит - имхо, лучше ему сразу знать эффективные пути, а не только учебные..
Мне на днях пришлось править код, где люди несколько массивов в десятки тысяч строк гоняют в циклах совершенно зазря, поэтому я так остро реагирую

Answer 2

[Евгений Мартынов]

Даю рыбу, не удочку

function applyStyles(element, styles) {
  const keys = Object.keys(styles)
  for (let i = 0; i < keys.length; i++) {
    element.style[keys[i]] = styles[keys[i]]
}

Comments

[Евгений Мартынов]

Там кстати можно через - записывать свойства вроде, проверьте))

[Михаил Ливач]

а чем Вас не устроил Object.assign() ?

[Алексей Уколов]

Не надо так итерировать по свойствам объекта в современном js. Либо for ... in, либо Object.values + forEach. А это какая-то плохо читаемая смесь IE6 и ES6.

[Евгений Мартынов]

Алексей Уколов, вообще лучше не заниматься таким в целом, css свойства не принято так описывать

[Алексей Уколов]

Евгений Мартынов, это явно учебное задание. Смысл его решения в том, чтобы закрепить пройденный материал, а не решить какую-то практическую задачу. И закреплять лучше акутуальный синтаксис, а не устаревший.