Setting top and left CSS attributes
For some reason I'm unable to set the "top" and "left" CSS attributes using the following JavaScript.
var div = document.createElement('div');
div.style.position = 'absolute';
div.style.top = 200;
div.style.left = 200;
document.body.appendChild(div);
Using Firebug I can see that the div
gets the position
set to "absolute"
but the top
and left
attributes are not set!
This is for Firefox 3.6.
Your problem is that the top
and left
properties require a unit of measure, not just a bare number:
div.style.top = "200px";
div.style.left = "200px";
You can also use the setProperty method like below
document.getElementById('divName').style.setProperty("top", "100px");
div.style
yields an object (CSSStyleDeclaration). Since it's an object, you can alternatively use the following:
div.style["top"] = "200px";
div.style["left"] = "200px";
This is useful, for example, if you need to access a "variable" property:
div.style[prop] = "200px";