Définir une propriété CSS en JavaScript ?

Question

J'ai créé ce qui suit...

var menu = document.createElement('select');

Comment puis-je maintenant définir des attributs CSS, par exemple width: 100px ?

Answer 1

Utilisez element.style :

var element = document.createElement('select');
element.style.width = "100px";

Answer 2

Il suffit de définir le style :

var menu = document.createElement("select");
menu.style.width = "100px";

Ou si vous voulez, vous pouvez utiliser jQuery :

$(menu).css("width", "100px");

Answer 3

Pour la plupart des styles, faites ceci :

var obj = document.createElement('select');
obj.style.width= "100px";

Pour les styles dont le nom comporte des traits d'union, procédez comme suit :

var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"

Answer 4

C'est en fait assez simple avec vanilla JavaScript :

menu.style.width = "100px";

Answer 5

Toutes les réponses vous indiquent correctement comment faire ce que vous avez demandé, mais je vous conseille d'utiliser JavaScript pour définir une classe sur l'élément et de le styliser en utilisant CSS. De cette façon, vous gardez la séparation correcte entre le comportement et le style.

Imaginez que vous fassiez appel à un designer pour remodeler le site... il devrait pouvoir travailler uniquement en CSS sans avoir à utiliser votre JavaScript.

En prototype, je le ferais :

$(newElement).addClassName('blah')