Подстановка HTMLElement.style

145
13 июня 2019, 07:10

Создаю функцию для быстрого создания тега.

Выглядит примерно так.

function createElemenet(tag, param)
{
    var element = document.createElement(tag);
    if(param.className || param.class)
        element.className = param.className ? param.className : param.class;
    if(param.id)
        element.id = param.id;
    if(param.events)
    {
        for(action in param.events)
        {
            element.addEventListener(action, param.events[action], false);        
        }
    }
    if(param.style)
    {
        for(attribute in param.style)
        {
            element.style.attrStyle = param.style[attrStyle]; // тут не пашет
        }
    }
    return element;
}

когда хочу подцеплять стили, не могу подставить нужный стиль к element.style.backgroundColor (допустим так)

вызов выглядит вот так примерно

createElemenet('div', 
{
    id: 'test',
    class: 'test',
    style: {
        backgroundImage: '200px'
    }
})

вроде въезжаю, что просто строку нельзя подставить, но как правильно сделать, въехать не могу

Answer 1

Слева - так же как справа.

    for(var attribute in param.style)
    {
        element.style[attribute] = param.style[attribute]; // тут пашет
    }


function createElemenet(tag, param) { 
  var element = document.createElement(tag); 
 
  if (param.className || param.class) 
    element.className = param.className || param.class; 
 
  if (param.id) 
    element.id = param.id; 
 
  if (param.events) { 
    for (action in param.events) { 
      element.addEventListener(action, param.events[action], false); 
    } 
  } 
 
  if (param.style) { 
    for (var attribute in param.style) { 
      element.style[attribute] = param.style[attribute]; 
    } 
  } 
 
  return element; 
} 
 
document.body.appendChild(createElemenet('div', { 
  id: 'test1', 
  className: 'block', 
  style: { 
    backgroundColor: 'lightgreen' 
  } 
})); 
document.body.appendChild(createElemenet('div', { 
  id: 'test2', 
  class: 'block' 
}));
.block { 
  display: inline-block; 
  margin: 5px; 
  width: 100px; 
  height: 100px; 
  border: 1px solid black; 
  background: pink; 
}

READ ALSO
Поиск по вложенному объекту JS
javascript

Поиск по вложенному объекту JS

 158
Минимальная высота сколлбара, самопис
javascript

Минимальная высота сколлбара, самопис

Всем приветПишу тут скрипт для кастомного скроллбара

 159
Get JSON API Wordpress?
javascript

Get JSON API Wordpress?

и тут у меня Error

 106
Создание массива в чаилд компоненте
javascript

Создание массива в чаилд компоненте

Мне в child компоненте по методу onClick надо модифицировать массив, который будет передаваться в родитель, а из родителя уже в другой child компонент

 137