Как применить стили в парах ключ-значение в DOM?

Question

Хорошо, допустим, мы создаем элемент DOM:

let element = document.createElement('div');

Теперь, если я хочу применить к нему стили, мы можем сказать:

element.style = 'display: inline-block; width: 50%; height: 100px; background: #f00;';

Мы также можем сказать это:

elemenet.style.display = 'inline-block';
elemenet.style.width = '50%';
elemenet.style.height = '100px';
elemenet.style.background = '#f00';

Этот подход слишком много повторяется, потому что вы всегда говорите element.style., когда применяете несколько стилей.

В jQuery-подобном синтаксисе мы можем применить объект пар ключ-значение в методе jQuery $.css(), например:

$(element).css({
    display: 'inline-block',
    width: '50px',
    height: '100px',
    background: '#f00'
});

С учетом сказанного мы можем сказать следующее:

let styles = {
    display: 'inline-block',
    width: '50px',
    height: '100px',
    background: '#f00'
};

for(let property in styles) {
    if(styles.hasOwnProperty(property)) {
        element.style[property] = styles[property];
    }
}

Это будет применять все стили в element. Я мог бы даже написать функцию, скажем, applyCSS(element, styles) и сделать то же самое, что и выше.

Но, в последнем случае, если мы сделаем следующее:

element.style = {
    display: 'inline-block',
    width: '50px',
    height: '100px',
    background: '#f00'
};

Это не будет летать вообще. Это не будет работать вообще, и к элементу не будут применены стили.

Мой вопрос: как правильно применять пары ключ-значение для style в DOM?

Answer 1

Вы все еще можете возиться с прототипом CSSStyleDeclaration, чтобы добавить свою функцию.Но я бы не стал этого делать, не проявив особой осторожности и не добавив множество проверок, которых я здесь не делал.

Пример:

CSSStyleDeclaration.prototype.setStyles = function(styles){
  for(let property in styles) {
      if(styles.hasOwnProperty(property) && property in this) {
          this[property] = styles[property];
      }else{
          console.error('no property ' + property);
      }
  }
};

document.body.style.setStyles({
  color: 'red',
  foo: 'bar',
});

<span>text</span>

EDIT изменен CSS2Properties на CSSStyleDeclaration

EDIT2 Добавлены некоторые другие возможности

Вы также можете расширить прототип HTMLElement, например:

HTMLElement.prototype.setStyles = function(styles){
  for(let property in styles) {
      if(styles.hasOwnProperty(property) && property in this.style) {
          this.style[property] = styles[property];
      }else{
          console.error('no property ' + property);
      }
  }
};

document.body.setStyles({
  color: 'red',
  foo: 'bar',
});

<span>text</span>

Но самый безопасный способ - использовать собственный класс элементов HTML, как это делает jQuery, и не связываться с прототипами важных объектов:

function myHTMLElement(selection){
  //you can use this function as a selector like jQuery, testing the type of "selection" is a string and use querySelector
  
  var construct = function(selection){
    this._element = selection;
  };
  //defining it on prototype means all instances will use same function
  construct.prototype.setStyles = function(styles){
    if(this._element && this._element.style){
      for(let property in styles) {
          if(styles.hasOwnProperty(property) && property in this._element.style) {
              this._element.style[property] = styles[property];
          }else{
              console.error('no property ' + property);
          }
      }
    }
    return this;
  };
  
  return new construct(selection);
};

myHTMLElement(document.body).setStyles({
  color: 'red',
  foo: 'bar',
});

<span>text</span>

Answer 2

, вероятно, со свойством стиля, рассматриваемым как объект, это не позволило вам присвоить значение для свойства.

Однако, с element.attributes['style'].value, похоже, работает.

Точно так же, как показано ниже:

element.style = ''; //add the missing attribute
element.attributes['style'].value = 'display: inline-block; width: 50%; height: 100px; background: #f00;';

Обратите внимание, что атрибут style отсутствует для вновь созданного элемента.

Надеюсь, это поможет.