Установка верхнего и левого CSS-атрибутов

По какой-то причине я не могу установить "верхний" и "левый" атрибуты CSS, используя следующий JavaScript.

var div = document.createElement('div');
div.style.position = 'absolute';
div.style.top = 200;
div.style.left = 200;
document.body.appendChild(div);

Использование Firebug Я вижу, что div получает значение position в "absolute", но атрибуты top и left не установлены!

Это для Firefox 3.6.

Ответы

Ответ 1

div.style.top = "200px";
div.style.left = "200px";

Ответ 2

Вы также можете использовать метод setProperty, как показано ниже

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

Ответ 3

div.style дает объект (CSSStyleDeclaration). Поскольку это объект, вы также можете использовать следующее:

div.style["top"] = "200px";
div.style["left"] = "200px";

Это полезно, например, если вам нужно получить доступ к свойству "variable":

div.style[prop] = "200px";

Ответ 4

Мы можем создать новый класс CSS для div.

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