Come aggiungere dinamicamente un stile per text-align utilizzando jQuery

Question

Sto cercando di correggere il solito IE bug CSS 2.1 e hanno bisogno di un modo per modificare un elemento di proprietà di stile per aggiungere un testo personalizzato-align stile.

Attualmente in jQuery è possibile fare qualcosa di simile

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

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

La voce è già una classe e ho impostato il text-align in classe senza fortuna.È possibile aggiungere solo un text-align CSS attributo di questo elemento dopo che viene definita una classe?

Ho qualcosa di simile a questo

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

subito dopo il mio regolazione della larghezza e dopo che l'ho vista questa in firebug vedo solo la "larghezza" è l'unico insieme di proprietà dello stile.Qualsiasi aiuto?

EDIT:

Whoa - grande risposta a questa domanda!Un po ' più in dettaglio risolvere il problema a portata di mano:

Sto per modificare il js di origine per jqGrid A3.5 fare qualche custom griglia secondaria di lavoro e l'effettivo JS sto messa a punto è mostrato di seguito (mi dispiace per l'utilizzo di "questo" nel mio esempio 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 il seguito (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');

Continuerò a lavorare su questo problema oggi e post una soluzione definitiva per chiunque sentire 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?

Per 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 vostra fonte non viene modificata da JavaScript, ma il DOM è. Cercare nella scheda DOM e vedere se è stato applicato il cambio.

Answer 2

Si potrebbe anche provare quanto segue 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 inline di solito ottengono la precedenza.

Modifica Inoltre, un altro strumento che può aiutare è Jash ( http://www.billyreisinger.com/jash/). Ti dà un prompt dei comandi javascript in modo da poter essere sicuri di testare facilmente javascript dichiarazioni e assicurarsi che si sta selezionando l'elemento giusto, ecc.

Answer 3

Io di solito uso

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

Speranza che aiuta

Answer 4

Credo che si dovrebbe usare "textAlign" invece di "text-align".

Answer 5

Interessante. Ho avuto lo stesso problema, come quando ho scritto una versione di prova.

La soluzione è quella di utilizzare la capacità di jQuery catena e da fare:

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

trovo interessante però.

Per espandere un po ', il seguente fa non lavoro

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

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

Answer 6

$(this).css("text-align", "center"); dovrebbe funzionare, assicurarsi che 'questo' è l'elemento che si sta effettivamente cercando di impostare lo stile text-align a.

Answer 7

è corretto?

<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

Funzione add_question () {     conteggio var = document.getElementById ( "nofquest"). value;     var container = document.getElementById ( "contenitore");             // Cancella contenuto precedente del contenitore             while (container.hasChildNodes ())             {                 container.removeChild (container.lastChild);             }             for (i = 1; i

come impostare centro delle caselle di testo

Answer 11

supporre che segue è il tag HTML comma:

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

e vogliamo cambiare il colore del paragrafo in jQuery.

Il codice lato client sarà:

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