設置頂部和左側 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;
    }