Définition des attributs CSS top et left

Question

Pour une raison quelconque, je ne parviens pas à définir les attributs CSS "top" et "left" à l'aide du JavaScript suivant.

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

En utilisant Firebug, je peux voir que le div obtient le position fixé à "absolute" mais le top y left ne sont pas définis !

Ceci est pour Firefox 3.6.

Answer 1

Votre problème est que le top y left les biens nécessitent une unité de mesure, et pas seulement un simple nombre :

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

Answer 2

Vous pouvez également utiliser la méthode setProperty comme suit

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

Answer 3

Et que dire de l'ajout de ce style :

filter: alpha(opacity=70); -khtml-opacity: 0.7;  -moz-opacity: 0.7; opacity: 0.7;

Ok, je suis désolée, juste fondée :

.style.cssText = "filter: alpha(opacity=70); -khtml-opacity: 0.7;  -moz-opacity: 0.7; opacity: 0.7;";

Answer 4

div.style produit un objet ( CSSStyleDeclaration ). Comme il s'agit d'un objet, vous pouvez également utiliser la méthode suivante :

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

Ceci est utile, par exemple, si vous avez besoin d'accéder à une propriété "variable" :

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

Answer 5

Nous pouvons créer une nouvelle classe CSS pour div.

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