Cómo agregar dinámicamente un estilo para alinear texto usando jQuery

Estoy tratando de corregir los errores habituales de IE en CSS 2.1 y necesito una forma de alterar las propiedades de estilo de un elemento para agregar un estilo de alineación de texto personalizado.

Actualmente en jQuery puedes hacer algo como

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

pero parece que no puedo encontrar una buena manera de alterar la alineación del texto con este mismo enfoque.

El elemento ya tiene una clase y configuré la alineación de texto en esa clase sin suerte. ¿Es posible simplemente agregar un atributo CSS de alineación de texto a este elemento después de que se define una clase?

Tengo algo como esto

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

justo después de mi ajuste de ancho y después de ver esto en firebug, veo que solo "ancho" es la única propiedad establecida en el estilo. ¿Alguna ayuda?

EDITAR:

¡Vaya, gran respuesta a esta pregunta! Un poco más de detalle sobre el problema en cuestión:

Estoy ajustando la fuente js para jqGrid A3.5 para hacer un trabajo de subcuadrícula personalizado y el JS real que estoy ajustando se muestra a continuación (lo siento por usar "esto" en mis ejemplos anteriores, pero quería mantener esto simple para brevedad)

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

Probé los dos siguientes (de las respuestas proporcionadas) sin suerte.

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

Y

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

Continuaré trabajando en este problema hoy y publicaré una solución final para cualquiera que sienta mi dolor por este extraño problema.

Tienes la idea correcta, como muestra la documentación:

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

¿Estás seguro de que identificas correctamente esto con class o id?

Por ejemplo, si su clase es myElementClass

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

Además, no he trabajado con Firebug en un tiempo, pero ¿estás mirando el dom y no el html? Javascript no cambia la fuente, pero el dominio sí. Mire en la pestaña dom y vea si se aplicó el cambio.

También puede probar lo siguiente para agregar un estilo en línea al elemento:

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

Esto debería garantizar que otras reglas de estilo no anulen lo que pensaba que funcionaría. Creo que los estilos en línea suelen tener prioridad.

EDITAR: Además, otra herramienta que puede ayudarlo es Jash ( http://www.billyreisinger.com/jash/ ). Le brinda un símbolo del sistema de JavaScript para que pueda asegurarse de probar fácilmente las declaraciones de JavaScript y asegurarse de que está seleccionando el elemento correcto, etc.

Yo suelo usar

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

Espero que ayude

Creo que debería utilizar "textAlign" en lugar de "text-align".

Interesante. Tuve el mismo problema que tú cuando escribí una versión de prueba.

La solución es usar la capacidad de jquery para encadenar y hacer:

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

Aunque interesante hallazgo.

Para expandir un poco, lo siguiente no funciona

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

y da como resultado que solo se establezca el ancho en el estilo. Encadenar los dos, como sugerí anteriormente, parece funcionar.

$(this).css("text-align", "center"); debería funcionar, asegúrese de que 'this' sea el elemento en el que está tratando de establecer el estilo de alineación de texto.

¿Es correcto?

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

<!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>

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

Puede usar el nombre de la clase y la identificación en lugar de esto

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

o

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

supongamos que a continuación está la etiqueta de párrafo html:

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

y queremos cambiar el color del párrafo en jquery.

El código del lado del cliente será:

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

cómo establecer el centro de los cuadros de texto