如何在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'
};

这根本不会飞。 这根本不起作用，并且没有样式将应用于该元素。

我的问题是：如何为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;';

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

希望这可以帮助。