web-dev-qa-db-fra.com

Définir la propriété CSS en Javascript?

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

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

Comment définirais-je maintenant les attributs CSS, par exemple width: 100px?

javascriptcss
141
Skizit

Utilisez element.style :

_var element = document.createElement('select');
element.style.width = "100px";
_
229
KJYe.Name

Il suffit de définir la style:

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

Ou si vous le souhaitez, vous pouvez utiliser jQuery :

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

Pour la plupart des styles, procédez comme suit:

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

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

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

C'est en fait assez simple avec JavaScript JavaScript:

menu.style.width = "100px";
17
Justin Niessner

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

Imaginez que si vous avez un designer qui redessine le site ... il devrait pouvoir travailler uniquement en CSS sans avoir à travailler avec votre JavaScript.

En prototype je ferais:

$(newElement).addClassName('blah')
15
Nick

si vous souhaitez ajouter une propriété globale, vous pouvez utiliser:

    var styleEl = document.createElement('style'), styleSheet;
            document.head.appendChild(styleEl);
            styleSheet = styleEl.sheet;
            styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
5
Hetdev

Juste pour les personnes qui veulent faire la même chose en 2018

Vous pouvez affecter une propriété personnalisée CSS à votre élément (via CSS ou JS) et la modifier:

Affectation via CSS: 

element {
  --element-width: 300px;

  width: var(--element-width, 100%);
}

Affectation via JS 

ELEMENT.style.setProperty('--element-width', NEW_VALUE);

Obtenir la valeur de la propriété via JS 

ELEMENT.style.getPropertyValue('--element-width');

Voici des liens utiles:

4
Mattia Astorino

Lors du débogage, j'aime pouvoir ajouter un groupe d'attributs CSS sur une seule ligne:

menu.style.cssText = 'width: 100px';

Pour vous habituer à ce style, vous pouvez ajouter un tas de CSS dans une ligne, comme ceci:

menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';
4
afable
<h1>Silence and Smile</h1>
<input  type="button"  value="Show Red"   onclick="document.getElementById('h1').style.color='Red'"/>
<input  type="button"  value="Show Green" onclick="document.getElementById('h1').style.color='Green'"/>
3
Mohsin Khan
<body>
  <h1 id="h1">Silence and Smile</h1><br />
  <h3 id="h3">Silence and Smile</h3>

  <script type="text/javascript">
    document.getElementById("h1").style.color = "Red";
    document.getElementById("h1").style.background = "Green";
    document.getElementById("h3").style.fontSize = "larger" ; 
    document.getElementById("h3").style.fontFamily = "Arial";
  </script>
</body>
1
Mohsin Khan

Cela fonctionne bien avec la plupart des propriétés CSS s'il n'y a pas de traits d'union.

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

Pour les propriétés contenant des traits d'union tels que max-width, vous devez convertir le sausage-case en camelCase.

var element = document.createElement('select');
element.style.maxWidth = "100px";
1
Daut