Comment ajouter dynamiquement un style d'alignement de texte à l'aide de jQuery

Question

Je suis en train de corriger l'habitude IE bugs CSS 2.1 et ont besoin d'un moyen de modifier un des éléments les propriétés de style pour ajouter un texte personnalisé-align style.

Actuellement en jQuery vous pouvez faire quelque chose comme

$(this).width( or $(this).height(

mais je n'arrive pas à trouver un bon moyen de modifier le texte-align w/ c'est la même approche.

L'article a déjà une classe et j'ai placé le texte-align dans cette catégorie avec pas de chance. Est-il possible de simplement ajouter un text-align attribut css à cet élément, après une classe est définie?

J'ai quelque chose comme ceci

$(this).css("text-align", "center");

juste après mon réglage de la largeur et après j'ai vue cela dans firebug, je vois seulement "largeur" est le seul des biens mis sur le style ... toute aide?

EDIT:

Whoa - grande réponse à cette question! Merci à tous ceux qui ont répondu! Un peu plus de détails sur le problème à portée de main:

Je suis à peaufiner les js source pour jqGrid A3.5 faire quelques personnalisé sous la grille de travail et le réel JS je suis ajustements sont présentés ci-dessous (désolé pour l'utilisation de "ce" dans mes exemples ci-dessus, mais je voulais garder cela simple pour des raisons de concision)

var subGridJson = function(sjxml, sbid) {
                    var tbl, trdiv, tddiv, result = "", i, cur, sgmap,
    		        dummy = document.createElement("table");
                    tbl = document.createElement("tbody");
                    $(dummy).attr({ cellSpacing: "0", cellPadding: "0", border: "0" });
                    trdiv = document.createElement("tr");
                    for (i = 0; i < ts.p.subGridModel[0].name.length; i++) {
                        tddiv = document.createElement("th");
                        tddiv.className = "ui-state-default ui-th-column";
                        $(tddiv).html(ts.p.subGridModel[0].name[i]);
                        $(tddiv).width(ts.p.subGridModel[0].width[i]);

                        trdiv.appendChild(tddiv);
                    }
                    tbl.appendChild(trdiv);

J'ai essayé les deux ci-dessous (à partir des réponses fournies) avec pas de chance.

$(tddiv).width(ts.p.subGridModel[0].width[i]).attr('style', 'text-align: center');

ET

$(tddiv).width(ts.p.subGridModel[0].width[i]).css('text-align', 'center');

Je vais continuer à travailler sur cette question aujourd'hui, et après une dernière solution pour la personne de ressentir ma douleur autour de cette étrange question.

Answer 1

Vous avez la bonne idée, que de la documentation montre:

http://docs.jquery.com/CSS/css#namevalue

Êtes-vous sûr que vous êtes à identifier correctement cette classe ou l'id?

Par exemple, si votre classe est myElementClass

$('.myElementClass').css('text-align','center');

Aussi, je n'ai pas travaillé avec Firebug, mais vous êtes à la recherche du dom et de ne pas le html? Votre source n'est pas modifiée par le javascript, mais le dom est. Regarder dans l'onglet dom et de voir si le changement a été appliqué.

Answer 2

Vous pouvez également essayer les méthodes suivantes pour ajouter une ligne de style de l'élément:

$(this).attr('style', 'text-align: center');

Cela devrait faire en sorte que d'autres règles de style ne sont pas prépondérantes, ce que vous avez pensé serait de travailler. Je crois styles en ligne obtenez généralement préséance.

EDIT: Aussi, un autre outil qui peut vous aider est Jash (http://www.billyreisinger.com/jash/). Il vous donne un javascript invite de commande de sorte que vous pouvez vous assurer que vous de tester facilement d'instructions javascript, et assurez-vous de sélectionner le bon élément, etc.

Answer 3

J'utilise habituellement

 $(this).css({
	"textAlign":"center",
	"secondCSSProperty":"value" 
});
 

J'espère que cela pourra aider

Answer 4

Je pense que vous devriez utiliser "textAlign" au lieu de "text-align".

Answer 5

Intéressant. J'ai eu le même problème que toi quand j'ai écrit une version de test.

La solution est d'utiliser du jquery capacité à chaîne et à faire:

$(this).width(500).css("text-align", "center");

Trouvaille intéressante.

Pour développer un peu plus, ce qui suit ne pas travailler

$(this).width(500);
$(this).css("text-align", "center");

et les résultats que dans la largeur sur le style. Enchaînant les deux, comme je l'ai suggéré ci-dessus, ne semble pas fonctionner.