Как обновить мою функцию createElement, чтобы свойство и значения внутри тега стиля можно было записать в виде объектов, а не строк?

Question

Я создал функцию, которая создает элемент и прикрепляет к нему атрибуты и значения:

 var createElement = function(sel, att, val) { 
     var a = document.createElement(sel);
         if ( sel === "input" ) {
          a.value = val; 
         }
         else {
        a.innerHTML = val; 
        }
     document.body.appendChild(a) || 
     document.documentElement.appendChild(a);
     for( var key in att ) { 
     a.setAttribute( key, att[key] ); 
     }; 
   return a; 
  };

Чтобы вызвать его, я делаю:

 createElement("h1", null, "Hello"); // Does the work 
 createElement("input", null, "Hello"); // Does the work

Итак, вы не можете спроситьтогда где проблема? Проблема заключается в добавлении свойства и значения атрибута style. Я хочу написать код примерно так:

  createElement("h1", {
     style: {
        color: "white",
        backgroundColor: "#008eff",
        padding: "20px"
     }
  },
  "Hello"
  );

Но, с помощью функции, которую я сделал, я должен написать что-то вроде этого:

 createElement("h1", {
    style: "color : white; background-color : #008eff; padding : 20px;"
 }, 
 "Hello"
 );

Я хочу написать стиликак объекты, а не строки! Да, я хочу обновить свой кусок кода! Можно ли это сделать?

Заранее спасибо

Answer 1

Вы можете использовать att [key] для другого случая атрибутов, в этом случае я использовал att ['style'] следующим образом:

var createElement = function(sel, att, val) { 
     var a = document.createElement(sel);
         if ( sel === "input" ) {
              a.value = val; 
         }
         else {
            a.innerHTML = val; 
         }
     document.body.appendChild(a) || 
     document.documentElement.appendChild(a);
     for( var key in att ) { 
         if (att['style']!==undefined) {
      	    stylekeys = Object.keys(att['style']);
            val = "";
            stylekeys.forEach(styleatt => {
                val +=  styleatt+": "+att['style'][styleatt]+"; ";
            })
            a.setAttribute( key, val ); 		
          }         
     }; 
   return a; 
  };
  createElement("h1", {
     style: {
        color: "white",
        backgroundColor: "#008eff",
        padding: "20px"
     }
  },
  "Hello"
  );

Answer 2

Если значение передаваемого вами атрибута является объектом, используйте Object.assign, чтобы присвоить его атрибуту объекта:

var createElement = function(sel, att, val) {
  var a = document.createElement(sel);
  if (sel === "input") {
    a.value = val;
  } else {
    a.innerHTML = val;
  }
  document.body.appendChild(a) ||
    document.documentElement.appendChild(a);
  Object.entries(att).forEach(([key, val]) => {
    if (typeof val === 'object') {
      Object.assign(a[key], val);
    } else {
      a[key] = val;
    }
  });
  return a;
};

createElement("h1", {
    style: {
      color: "white",
      backgroundColor: "#008eff",
      padding: "20px"
    }
  },
  "Hello"
);