Comment puis-je définir plusieurs styles CSS en JavaScript?

J’ai les variables JavaScript suivantes:

var fontsize = "12px" var left= "200px" var top= "100px" 

Je sais que je peux les configurer de manière itérative comme ceci:

 document.getElementById("myElement").style.top=top document.getElementById("myElement").style.left=left 

Est-il possible de les mettre tous ensemble en même temps, quelque chose comme ça?

 document.getElementById("myElement").style = allMyStyle 

    Si vous avez les valeurs CSS en tant que chaîne et qu’il n’y a pas d’autre CSS déjà défini pour l’élément (ou que vous ne vous souciez pas de l’ cssText ), utilisez la propriété cssText :

     document.getElementById("myElement").style.cssText = cssSsortingng; 

    C’est bon dans un sens car cela évite de repeindre l’élément chaque fois que vous modifiez une propriété (vous les modifiez tous “à la fois” d’une manière ou d’une autre).

    De l’autre côté, vous devez d’abord créer la chaîne.

    Utiliser Object.assign :

     Object.assign(yourelement.style,{fontsize:"12px",left:"200px",top:"100px"}); 

    Cela vous permet également de fusionner des styles au lieu de réécrire le style CSS.

    Vous pouvez également créer une fonction de raccourci:

     const setStylesOnElement = function(styles, element){ Object.assign(element.style, styles); } 

    @Mircea: Il est très facile de définir plusieurs styles pour un élément dans une seule déclaration. Cela n’affecte pas les propriétés existantes et évite la complexité des boucles ou des plug-ins.

     document.getElementById("demo").setAtsortingbute( "style", "font-size: 100px; font-style: italic; color:#ff0000;"); 

    ATTENTION: Si, plus tard, vous utilisez cette méthode pour append ou modifier des propriétés de style, les propriétés précédentes définies avec ‘setAtsortingbute’ seront effacées.

    Créez une fonction pour en prendre soin, et transmettez-lui les parameters avec les styles que vous souhaitez modifier.

     function setStyle( objId, propertyObject ) { var elem = document.getElementById(objId); for (var property in propertyObject) elem.style[property] = propertyObject[property]; } 

    et l’appeler comme ça

     setStyle('myElement', {'fontsize':'12px', 'left':'200px'}); 

    pour les valeurs des propriétés à l’intérieur du propertyObject, vous pouvez utiliser des variables.

    Une bibliothèque JavaScript vous permet de faire ces choses très facilement

    jQuery

     $('#myElement').css({ font-size: '12px', left: '200px', top: '100px' }); 

    Objet et une boucle

    Ou, une méthode beaucoup plus élégante est un object de base et une boucle

     var el = document.getElementById('#myElement'), css = { font-size: '12px', left: '200px', top: '100px' }; for(i in css){ el.style[i] = css[i]; } 

    définir plusieurs propriétés de style css en Javascript

     document.getElementById("yourElement").style.cssText = cssSsortingng; 

    ou

     document.getElementById("yourElement").setAtsortingbute("style",cssSsortingng); 

    Exemple:

     document .getElementById("demo") .style .cssText = "margin-left:100px;background-color:red"; document .getElementById("demo") .setAtsortingbute("style","margin-left:100px; background-color:red"); 

    Je suis juste tombé par ici et je ne vois pas pourquoi il y a tant de code requirejs pour y parvenir.

    Ajoutez votre code CSS en tant que chaîne.

     let styles = ` font-size:15em; color:red; transform:rotate(20deg)` document.querySelector('div').style = styles 
     
    a

    Vous pouvez avoir des classes individuelles dans vos fichiers CSS et ensuite atsortingbuer le nom de classe à votre élément

    ou vous pouvez parcourir les propriétés des styles comme –

     var css = { "font-size": "12px", "left": "200px", "top": "100px" }; for(var prop in css) { document.getElementById("myId").style[prop] = css[prop]; } 

    Ne pense pas que c’est possible en tant que tel.

    Mais vous pouvez créer un object en dehors des définitions de style et les parcourir simplement.

     var allMyStyle = { fontsize: '12px', left: '200px', top: '100px' }; for (i in allMyStyle) document.getElementById("myElement").style[i] = allMyStyle[i]; 

    Pour développer davantage, faites-en une fonction:

     function setStyles(element, styles) { for (i in styles) element.style[i] = styles[i]; } setStyles(document.getElementById("myElement"), allMyStyle); 

    En utilisant le Javascript simple, vous ne pouvez pas définir tous les styles à la fois; vous devez utiliser des lignes simples pour chacun d’eux.

    Cependant, vous n’avez pas à répéter le document.getElementById(...).style. code encore et encore; créer une variable d’object pour la référencer et rendre votre code beaucoup plus lisible:

     var obj=document.getElementById("myElement").style; obj.top=top; obj.left=left; 

    …etc. Beaucoup plus facile à lire que votre exemple (et franchement, tout aussi facile à lire que l’alternative jQuery).

    (si Javascript avait été conçu correctement, vous auriez également pu utiliser le mot-clé with , mais il est préférable de le laisser seul, car cela peut causer des problèmes d’espace de noms)

    Votre meilleur pari peut être de créer une fonction qui définit les styles par vous-même:

     var setStyle = function(p_elem, p_styles) { var s; for (s in p_styles) { p_elem.style[s] = p_styles[s]; } } setStyle(myDiv, {'color': '#F00', 'backgroundColor': '#000'}); setStyle(myDiv, {'color': mycolorvar, 'backgroundColor': mybgvar}); 

    Notez que vous devrez toujours utiliser les noms de propriété compatibles javascript (donc backgroundColor )

    Voir pour .. dans

    Exemple:

     var myStyle = {}; myStyle.fontsize = "12px"; myStyle.left= "200px"; myStyle.top= "100px"; var elem = document.getElementById("myElement"); var elemStyle = elem.style; for(var prop in myStyle) { elemStyle[prop] = myStyle[prop]; } 

    Ceci est un vieux fil, donc je pensais que pour ceux qui recherchent une réponse moderne, je suggère d’utiliser Object.keys ();

     var myDiv = document.getElementById("myDiv"); var css = { "font-size": "14px", "color": "#447", "font-family": "Arial", "text-decoration": "underline" }; function applyInlineStyles(obj) { var result = ""; Object.keys(obj).forEach(function (prop) { result += prop + ": " + obj[prop] + "; "; }); return result; } myDiv.style = applyInlineStyles(css); 

    J’ai créé un utilitaire JavaScript appelé styler.js qui est assez facile à utiliser sur mon blog. Il est très facile d’obtenir et de définir des styles CSS.

    Trouvez-le ici: http://www.tjcafferkey.me/getting-setting-styles-javascript-styler/

    Avec Zam tu le ferais comme ça

     zam.css({'font-size':'12px','left':'200px','top':'100px'}, '#myElement'); 

    Il y a des scénarios où l’utilisation de CSS et de javascript pourrait être plus logique avec un tel problème. Regardez le code suivant:

     document.getElementById("myElement").classList.add("newStyle"); document.getElementById("myElement").classList.remove("newStyle"); 

    Cela bascule simplement entre les classes CSS et résout tant de problèmes liés aux styles de substitution. Cela rend même votre code plus ordonné.