设置顶部和左侧 CSS 属性

Question

出于某种原因，我无法使用以下 JavaScript 设置“顶部”和“左侧”CSS 属性。

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。

Answer 1

您的问题是top和left属性需要一个度量单位，而不仅仅是一个数字：

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

Answer 2

您还可以使用 setProperty 方法，如下所示

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

Answer 3

div.style产生一个对象（ CSSStyleDeclaration ）。 由于它是一个对象，您可以选择使用以下内容：

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

这很有用，例如，如果您需要访问“变量”属性：

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

Answer 4

我们可以为 div 创建一个新的 CSS 类。

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