Réponses:
Utilisez element.style:
var element = document.createElement('select');
element.style.width = "100px";Réglez simplement le style:
var menu = document.createElement("select");
menu.style.width = "100px";Ou si vous le souhaitez, vous pouvez utiliser jQuery :
$(menu).css("width", "100px");:)
Pour la plupart des styles, procédez comme suit:
var obj = document.createElement('select');
obj.style.width= "100px";Pour les styles qui ont des traits d'union dans le nom, procédez comme suit:
var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"C'est en fait assez simple avec JavaScript vanille:
menu.style.width = "100px";Toutes les réponses vous indiquent 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 le styliser en utilisant CSS. De cette façon, vous gardez la séparation correcte entre le comportement et le style.
Imaginez si vous aviez un concepteur pour remodeler le site ... il devrait pouvoir travailler uniquement en CSS sans avoir à travailler avec votre JavaScript.
En prototype, je ferais:
$(newElement).addClassName('blah')$(selector).addClass('blah')
Juste pour les gens qui veulent faire la même chose en 2018
Vous pouvez attribuer 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:
Lors du débogage, j'aime pouvoir ajouter un tas d'attributs css en une seule ligne:
menu.style.cssText = 'width: 100px';Pour vous habituer à ce style, vous pouvez ajouter un tas de css en une seule ligne comme ceci:
menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';<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'"/><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>Cela fonctionne bien avec la plupart des propriétés CSS s'il n'y a pas de trait d'union.
var element = document.createElement('select');
element.style.width = "100px";Pour les propriétés avec des traits d' union comme eux max-width, vous devez convertir sausage-caseàcamelCase
var element = document.createElement('select');
element.style.maxWidth = "100px";Il est important de comprendre que le code ci-dessous ne change pas la feuille de style, mais change plutôt le DOM:
document.getElementById("p2").style.color = "blue";
Le DOM stocke une valeur calculée des propriétés des éléments de la feuille de style, et lorsque vous modifiez dynamiquement un style d'éléments à l'aide de Javascript, vous modifiez le DOM. Il est important de le noter et de le comprendre car la façon dont vous écrivez votre code peut affecter votre dynamique. Si vous essayez d'obtenir des valeurs qui n'ont pas été écrites directement dans l'élément lui-même, comme ceci ...
let elem = document.getElementById('some-element');
let propertyValue = elem.style['some-property'];... vous renverrez une valeur non définie qui sera stockée dans la variable 'propertyValue' de l'exemple de code. Si vous travaillez avec l'obtention et la définition de propriétés qui ont été écrites dans une feuille de style CSS et que vous voulez une SEULE FONCTION qui obtient, ainsi que des valeurs de style-propriété-valeurs dans cette situation, ce qui est une situation très courante, alors vous devez utiliser JQuery.
$(selector).css(property,value)Le seul inconvénient est que vous avez appris à connaître JQuery, mais c'est honnêtement l'une des très nombreuses bonnes raisons pour lesquelles chaque développeur Javascript devrait apprendre JQuery. Si vous voulez obtenir une propriété CSS qui a été calculée à partir d'une feuille de style en JavaScript pur, vous devez utiliser.
function getCssProp(){
let ele = document.getElementById("test");
let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}L'inconvénient de cette méthode est que la méthode getComputedValue obtient uniquement, elle n'est pas définie. Le point de vue de Mozilla sur les valeurs calculées Ce lien va plus en profondeur sur ce que j'ai abordé ici. J'espère que cela aide quelqu'un !!!
-webkit-background-size? Existe-t-il un moyen de les définir avec des js simples ou devons-nous utiliser jQuery?