Définition dynamique d'une classe avec style spécifique dans jQuery

Question

Est-il possible de définir dynamiquement une classe avec des attributs de style spécifiques avec jQuery, plutôt que de définir le style de tous les éléments de cette classe?

Je pourrais définir les attributs de la classe à la fin du script une fois que tous les éléments ont été créés, mais est-ce la meilleure façon de s'y prendre? Si je définis le style de la classe avec $('.class').css('property','value'); au début du script, rien ne se passerait car les éléments de la classe .class n'ont pas encore été créés, n'est-ce pas?

Answer 1

La meilleure façon d'y parvenir est d'utiliser CSS. Si vous voulez des éléments avec la classe « foo » d'avoir un tas de propriétés, puis mettre ces propriétés dans un fichier CSS et les associer à un sélecteur approprié:

.yourClass { 
    font-weight: bold; 
    color: green; 
} 

Si vous avez besoin de faire cela de façon dynamique, il est possible de écrire des blocs CSS avec Javascript.Mettez un élément <style> dans votre page et de lui donner une valeur « id »:

<style id='dynamicStyle'></style> 

Ensuite, vous pouvez définir avec jQuery:

$('#dynamicStyle').text(".yourClass { font-weight: bold; }"); 

Answer 2

Vous ne savez pas exactement ce que vous pensez de cela, mais oui - vous devez appeler le script une fois que les éléments ont été créés. Si vous ne voulez pas avoir le script à la fin de votre document, l'envelopper dans

$(document).ready(function() { 
... 
}); 

ou, à défaut, le raccourci

$(function() { 
... 
}); 

Il déclenche une fois que tout le code HTML est chargé.

Answer 3

Si je vous comprends, vous voulez ajouter du style à des éléments spécifiques. Il n'est pas nécessaire d'utiliser .css(a,b) pour cela. jQuery a une fonction appelée addClass("className"); qui va ajouter une classe à l'élément que vous voulez.

$('.originalClass').addClass('addedClass'); 

Il n'écrase pas l'original.

Est-ce ce que vous vouliez?

---

EDIT:

Vous dites que vous voulez modifier votre feuille de style en javascript?

Si tel est le cas, il existe des règles javascript pour modifier les propriétés de la feuille de style.

Si vous (pour une raison quelconque) ne pouvez pas changer la feuille de style, alors peut-être vous pourriez simplement stocker vos styles dans un objet, et l'appliquer.

var stylesToAdd = { background:"orange", border:"1px solid blue" } 

Et d'utiliser .css() pour les appliquer.

$('#myElement').css(stylesToAdd);