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

142

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

155

javascript

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

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

157

javascript

Get JSON API Wordpress?

и тут у меня Error

103

javascript

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

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

134