Setting top and left CSS attributes

For some reason I'm unable to set the "top" and "left" CSS attribute开发者_开发问答s 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";

We can create a new CSS class for div.

 .div {
      position: absolute;
      left: 150px;
      width: 200px;
      height: 120px;
    }