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

这根本不会飞。这根本行不通，并且样式不会应用于元素。

我的问题是：如何在DOM中为style正确应用键值对？

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>

编辑将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;';

请注意，新创建的元素缺少样式属性。

希望这会有所帮助。

如何在DOM的键值对中应用样式？

2 个答案: