How to apply styles in key-value pairs in DOM?

Question

Okay, let's say we create a DOM element:

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

Now, if I want to apply styles onto it, we can say:

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

We can also say this:

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

This approach is way too much repetitive because you always have say element.style. , when you're applying multiple styles.

In jQuery-like syntax we can apply an object of key-value pairs in jQuery's $.css() method, like this:

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

With that being said, we can say the following:

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

This will apply all the styles in the element . I could even write a function, let's say applyCSS(element, styles) and do the same thing as above.

But, in the last case, if we do the following:

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

This won't fly at all. This won't work at all and no styles will be applied to the element.

My quesion is: how to properly apply key-value pairs for style in DOM?

Answer 1

You can still mess with the CSSStyleDeclaration prototype to add your function. But I wouldn't do that without being extra cautious and add a lot of verifications that i didn't do here.

An example:

 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 changed CSS2Properties to CSSStyleDeclaration

EDIT2 Added some other possibilities

You can also extend the HTMLElement prototype too, like this:

 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> 

But the safest way would be to use your own HTML element class, a bit like jQuery does, and not mess with prototypes of important objects:

 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

probably with style property being treated as an object, it didn't let you assign a value for the property.

However, with element.attributes['style'].value it seems to work.

Precisely as below:

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

Note that the style attribute is missing for the newly created element.

Hope this helps.