La meilleure façon d'ajouter de nouvelles règles css avec jquery?

J'insère dynamiquement un html sur une page Web (après avoir détecté un événement de l'utilisateur). Ce html a besoin d'un style css et je me demande quel est le moyen le plus propre à utiliser, en utilisant jQuery. Je ne suis pas le développeur du site Web, donc je ne peux pas ajouter ces règles au css original.

Supposons que j'ai déjà inséré un html sans style, y compris une classe formElement . Je peux écrire dans mon document un nouveau bloc <style> , par exemple:

 my_html = '<style type="text/css">'; my_html += ' .formElement {'; my_html += ' display: block;'; my_html += ' width: 240px;'; my_html += ' position: relative;'; my_html += ' padding: 4px 0;'; my_html += ' }'; my_html += '</style>'; my_html = $(my_html); $('body').prepend(my_html);

Ou, je peux utiliser la méthode css :

 $('.formElement').css({ 'display': 'block', 'width': '240px', 'position': 'relative', 'padding': '4px 0' });

Quelle solution est la meilleure / la plus propre?

MODIFIER:

Comme je ne peux pas ajouter directement les règles dans le CSS, je resterai avec la méthode css de jQuery. Certaines autres questions connexes fournissent également des solutions:

Créer une règle / classe CSS avec jQuery au moment de l'exécution
Modification des règles CSS en utilisant JavaScript ou jQuery

Je ne peux pas vraiment utiliser les plugins jQuery, mais si je le pouvais, j'aimerais certainement utiliser jQuery.Rule

Merci à tous pour votre aide précieuse.

Honnêtement, la meilleure façon peut ne pas l'être. Si je devais en choisir une, la méthode jquery css serait mon choix, juste parce qu'elle est plus propre, considérez cette alternative comme une meilleure performance et un code plus propre.

Créez des classes CSS pour ajouter vos éléments si nécessaire. Par exemple:

 .formElementAlpha { width:240px; padding:4px 0; } .formElementBravo { width:400px; height:50px; padding:20px 0; line-height:50px; font-size:30px; }

Ensuite, avec jquery, quand vous en avez besoin:

 $('.formElement').addClass('formElementAlpha');

 $('.formElement[name="bigUsernameInput"]').addClass('formElementBravo');

Je voudrais reserver la méthode jQuery css pour les cas où vous devez modifier un élément spécifique en fonction d'une sorte d'interaction utilisateur ou d'un autre événement dynamique qui vous oblige à utiliser la valeur de vos variables JavaScript pour déterminer les styles que vous appliquez. Comme il semble que vous savez déjà comment vous voulez les façonner, laissez CSS faire le travail.

Ne mélangez pas css et js ensemble, surtout si vos propriétés ne contiennent pas de valeurs calculées ou dynamiques: définissez simplement une classe CSS

 .mystyle { display: block; width: 240px; position: relative; padding: 4px 0; }

Et définir la classe

 $('.formElement').addClass('mystyle');

Ce:

 $('.formElement').css({ 'display': 'block', 'width': '240px', 'position': 'relative', 'padding': '4px 0' });

Votre deuxième option:

 $('.formElement').css({ 'display': 'block', 'width': '240px', 'position': 'relative', 'padding': '4px 0'

});

C'est de loin la solution la plus propre!

Utilisez jquery .css (propertyName, value)

 $('.formElement').css({ 'display': 'block', 'width': '240px', 'position': 'relative', 'padding': '4px 0' });

C'est le meilleur moyen parmi les solutions que vous avez fournies.

TOUJOURS, je voudrais créer une classe avec toutes ces propriétés, disons votre yourCSS et ajoutez la classe à cet élément:

 $('.formElement').addClass('yourCSS');

HTML

 <style id="customCSS"> ... </style>

 my_html += ' .formElement {'; my_html += ' display: block;'; my_html += ' width: 240px;'; my_html += ' position: relative;'; my_html += ' padding: 4px 0;'; my_html += ' }'; $('#customCSS').html(my_html)