Setting top and left CSS attributes

javascript coding-style
Deniz Dogan picture Deniz Dogan · Feb 6, 2010 · Viewed 120.3k times · Source

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.

Answer

Lyubomyr Shaydariv picture Lyubomyr Shaydariv · Feb 6, 2010

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

Related questions

typeof !== "undefined" vs. != null

I often see JavaScript code which checks for undefined parameters etc. this way: if (typeof input !== "undefined") { // do stuff } This seems kind of wasteful, since it involves both a type lookup and a string comparison, not to mention its verbosity. …

Read More
What's the best way to convert a number to a string in JavaScript?

What's the "best" way to convert a number to a string (in terms of speed advantage, clarity advantage, memory advantage, etc) ? Some examples: String(n) n.toString() ""+n n+""

Read More
Declaring multiple variables in JavaScript

In JavaScript, it is possible to declare multiple variables like this: var variable1 = "Hello, World!"; var variable2 = "Testing..."; var variable3 = 42; ...or like this: var variable1 = "Hello, World!", variable2 = "Testing...", variable3 = 42; Is one method better/faster than the other?

Read More