I’m building a code that injects a div into a site. The problem is that I can’t assign the css values via javascript, as they don’t seem to take place on the document (not all of them).
Here is the code:
var barRoot = document.createElement('DIV');
barRoot.style.backgroundColor='#44AA44';
barRoot.style['height']='30px';
barRoot.style['width']='100%';
barRoot.style['position']='absolute';
barRoot.style['font-size']='14px';
barRoot.style['font-family']='Arial, Helvetica, sans-serif';
barRoot.style['z-index']='99999001';
barRoot.style['font-weight']='bold';
barRoot.style['top']='0pt';
barRoot.style['left']='0pt';
barRoot.style['color']='White';
barRoot.style['padding']='0pt';
barRoot.style['margin']='0pt';
barRoot.style['border']='0px solid rgb(0, 0, 0)';
barRoot.id = 'irobRootElem1';
document.body.insertBefore(barRoot, document.body.firstChild);
var heartImg = document.createElement('IMG');
heartImg.src = 'heart.png';
heartImg.style['float']='left';
heartImg.style['margin-left']='8px';
heartImg.style['margin-top']='5px';
heartImg.style['margin-right']='8px';
barRoot.appendChild(heartImg);
If you want to assign styles via JavaScript, the property names are not exactly the same as in your CSS file.
Check this list in the w3c doc
But as suggested, use of classes are a lot more easier to use than programmatically set styles.
Here is the list extracted from the w3 link above :