Festlegen der oberen und linken CSS-Attribute

Aus irgendeinem Grund kann ich die CSS-Attribute "top" und "left" mit dem folgenden JavaScript nicht festlegen.

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

Mit Firebug kann ich sehen , dass das divdie bekommt positionSatz "absolute"aber die topund leftAttribute nicht gesetzt ist !

Dies ist für Firefox 3.6.

Ihr Problem ist, dass die Eigenschaften topund lefteine Maßeinheit erfordern, nicht nur eine bloße Zahl:

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

Sie können auch die setProperty-Methode wie unten verwenden

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

div.styleergibt ein Objekt ( CSSStyleDeclaration ). Da es sich um ein Objekt handelt, können Sie alternativ Folgendes verwenden:

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

Dies ist beispielsweise nützlich, wenn Sie auf eine "variable" Eigenschaft zugreifen müssen:

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

Wir können eine neue CSS-Klasse für div erstellen.

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