Set css properties with a json

Question

i've follow the w3c description for setting up the css properties of an element with javascript, but i cant figure how to do it with a json object.

my code is this :

var style = {
    position:'fixed',
    top:0,
    right:0,
    bottom:0,
    left:0,
    background:'red'
}


var el = document.getElementById( 'some_id' );
for( var key in style ){
    el.style.key = style[key]
}

but when a run my script i get "Uncaught TypeError: Cannot read property 'style' of null"

Solution

Code example:

Object.assign(document.querySelector('.my-element').style, {
    position: 'fixed',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    background: 'red'
})

Example on JSFiddle:

https://jsfiddle.net/b6hexafL/4/

Comments

[Franco Aguilera]

sorry guys, i not seems to work. i mean.. all i'm trying to do is to set the css properties with a for loop , iterating through an object.

[Franco Aguilera]

i think that the problem is about set up the "key" variable in el.style.key = css[key] inside the loop. because when i iterate key stand for the name of the property and css[key] stands for the value of the property ( i change style for css )

[雪月秋水]

I do it ,please check the example link and tell me your think