Невозможно установить свойство 0 из undefined JavaScript

Question

Я пытаюсь создать код JavaScript, который применяет свойства объекта к стилю элемента HTML, но в коде что-то не так. Я знаю, что могу сделать это по-другому, но это то, что я пытаюсь сделать.

var elem = {background:"red",
            position:"fixed", 
            height:"25px",
            width:"100px"
           }; 

var htmlObj = document.querySelector(".element");
var x; 

var cssProperties = Object.getOwnPropertyNames(elem);

for(x in cssProperties){
  htmlObj.style.cssProperties[x] = elem[cssProperties[x]];
}

<div class="element"></div>

Я получаю следующую ошибку:

сообщение об ошибке: ошибка неперехваченного типа

Что мне не хватает?

Answer 1

У вас есть несколько исправлений, которые вам нужно сделать:

Первый оператор , for .. in выполняет итерацию по enumerable properties, а cssProperties является массивом (iterable object), что означает, что вместо него следует использовать оператор for ... of.

for(x in cssProperties) приведет к x как 0, 1, 2, ... et c ... и for(x of cssProperties) приведет к x как к значениям элементов в массиве cssProperties.

Вторая вещь , которую нужно исправить, - это доступ к свойству стиля. введя htmlObj.style.cssProperties[x], вы пытаетесь получить доступ к свойству с именем cssProperties внутри style, которого не существует. Вы хотите установить свойство cssProperties[x] из styles.

Итак, вы должны написать: htmlObj.style[cssProperties[x]]

Фактически, x уже является именем свойства, которое вы хотите, поэтому должно быть: htmlObj.style[x].

Наконец, , вы хотите получить доступ к значению x в elem, поэтому вместо elem[cssProperties[x]] используйте elem[x].

Окончательный код должен быть:

var elem = {background:"red",
            position:"fixed", 
            height:"25px",
            width:"100px"
           }; 

var htmlObj = document.querySelector(".element");
var x; 

var cssProperties = Object.getOwnPropertyNames(elem);

for(x of cssProperties){
  htmlObj.style[x] = elem[x];
}

<div class="element"></div>

РЕДАКТИРОВАТЬ

Кстати. у вас там есть несколько дополнительных шагов. Вы можете использовать for .. in прямо на elem в качестве объекта, не извлекая его свойства и не перебирая их. Таким образом, более чистый код будет:

var elem = {background:"red",
            position:"fixed", 
            height:"25px",
            width:"100px"
           }; 

var htmlObj = document.querySelector(".element");

for(let x in elem){
  htmlObj.style[x] = elem[x];
}

<div class="element"></div>