Come aggiungere dinamicamente uno stile per allineare il testo usando jQuery

Question

Sto cercando di correggere i soliti bug di IE attorno a CSS 2.1 e ho bisogno di un modo per modificare le proprietà di uno stile di elementi per aggiungere uno stile di allineamento del testo personalizzato.

Attualmente in jQuery si può fare qualcosa di simile

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

, ma io non riesco a trovare un buon modo per alterare il text-align con questo stesso approccio.

L'articolo ha già una classe e io ho impostato l'allineamento del testo in quella classe senza fortuna. È possibile aggiungere un attributo css allineato al testo a questo elemento dopo che è stata definita una classe?

Ho qualcosa di simile

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

solo dopo la mia regolazione della larghezza e dopo ho vista questo Firebug vedo solo "larghezza" è l'unica proprietà impostata sullo stile. Qualche aiuto?

EDIT:

Whoa - grande risposta su questa domanda! Grazie a tutti quelli che hanno risposto! Un po 'più di dettagli sul problema in questione:

Sto modificando la sorgente js per jqGrid A3.5 per eseguire alcuni lavori di sub grid personalizzati e il JS effettivo che sto apportando è mostrato di seguito (mi dispiace per l'utilizzo di "questo "nei miei esempi di cui sopra, ma ho voluto mantenere questo semplice per brevità)

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); 

ho provato sia del sottostante (dalle risposte fornite) senza fortuna.

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

E

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

Io continuerò a lavorare su questo tema oggi e inviare una soluzione definitiva per tutti coloro che sentendo il mio dolore intorno a questo strano problema.

Answer 1

hai l'idea giusta, la documentazione mostra:

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

Sei sicuro che stai identificare correttamente questo con classe o id?

Ad esempio, se la classe è myElementClass

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

Inoltre, non ho lavorato con Firebug in un po ', ma stai guardando il dom e non il codice html? La tua fonte non è cambiata da javascript, ma la dom è. Cerca nella scheda dom e verifica se la modifica è stata applicata.

Answer 2

$(this).css("text-align", "center"); dovrebbe funzionare, assicurati che "questo" sia l'elemento in cui stai effettivamente provando a impostare lo stile di allineamento del testo.

Answer 3

si potrebbe anche provare il seguente per aggiungere uno stile in linea con l'elemento:

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

Questo dovrebbe fare in modo che le altre regole di stile non abbiano la prevalenza quello che si pensava avrebbe funzionato. Credo che gli stili in linea ottengano la precedenza.

EDIT: Inoltre, un altro strumento che può aiutare è Jash (http://www.billyreisinger.com/jash/). Ti dà un comando javascript per assicurarti di testare facilmente le dichiarazioni javascript e assicurarti di selezionare l'elemento giusto, ecc.

Answer 4

Penso che dovresti usare "textAlign" invece di "text-align".

Answer 5

Interessante. Ho avuto lo stesso problema con te quando ho scritto una versione di prova.

La soluzione è quella di utilizzare la capacità di jQuery per chain e fare:

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

Interessante trovare però.

Per espandere un po ', quanto segue non non lavoro

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

e solo i risultati nella larghezza di essere impostati sullo stile. Incatenare i due, come ho suggerito sopra, sembra funzionare.

Answer 6

Io di solito uso

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

Speranza che aiuta

Answer 7

è corretta?

<script> 
$("#box").one("click", function() { 
    $(this).css("width", "+=200"); 
}); 
</script> 

Answer 8

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script> 
     $(document).ready(function() { 
     $this = $('h1'); 
     $this.css('color','#3498db'); 
     $this.css('text-align','center'); 
     $this.css('border','1px solid #ededed'); 
     }); 
    </script> 

    </head> 
    <body> 
     <h1>Title</h1> 
</body> 
</html> 

Answer 9

$(this).css({'text-align':'center'}); 

È possibile utilizzare il nome della classe e l'ID al posto di questo

$('.classname').css({'text-align':'center'}); 

o

$('#id').css({'text-align':'center'}); 

Answer 10

supporre sotto è il tag HTML paragrafo:

<p style="background-color:#ff0000">This is a paragraph.</p> 

e vogliamo cambiare il colore del paragrafo in jquery.

Il client codice lato sarà:

<script> 
$(document).ready(function(){ 
    $("p").css("background-color", "yellow"); 
}); 
</script>