[javascript] 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.

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";

You can also use the setProperty method like below

document.getElementById('divName').style.setProperty("top", "100px");

We can create a new CSS class for div.

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