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

Question

J'ai les variables javascript suivantes:

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

Je sais que je peux les définir à mon élément 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 
 

Answer 1

Si vous avez le CSS valeurs en tant que chaîne et il n'y a pas d'autre CSS déjà défini pour l'élément (ou vous ne se soucient pas de les écraser), faire usage de l' cssText de la propriété:

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

Ce qui est bon dans un sens qu'il évite de repeindre l'élément chaque fois que vous modifiez une propriété (à vous de les changer tous les "à la fois" en quelque sorte).

De l'autre côté, vous devez construire la chaîne.

Answer 2

@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é liée à la recherche de boucles ou de plugins.

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

ATTENTION: Si, par la suite, vous utilisez cette méthode pour ajouter ou modifier des propriétés de style, les propriétés précédentes définies à l'aide de 'setAttribute' seront effacées.

Answer 3

Créez une fonction pour en prendre soin et transmettez-lui les paramètres 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'appelle comme ça

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

Pour les valeurs des propriétés à l'intérieur de propertyObject, vous pouvez utiliser des variables.

Answer 4

Un framework Javascript vous permet de faire ces choses très facilement

jQuery

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

---

Objet et une boucle for-in

Ou bien, une méthode beaucoup plus élégante est un objet de base & for-loop

 var el = document.getElementById('#myElement'),
    css = {
      fontsize: '12px',
      left: '200px',
      top: '100px'
    };  

for(i in css){
   el.style[i] = css[i];
}
 

Answer 5

Vous pouvez avoir des classes individuelles dans vos fichiers css puis assigner le nom de la classe à votre élément

ou vous pouvez parcourir les propriétés des styles en tant que -

 var css = { "font-size": "12px", "left": "200px", "top": "100px" };

for(var prop in css) {
  document.getElementById("myId").style[prop] = css[prop];
}