Cómo agregar dinámicamente un estilo para text-align usando jQuery

Question

que estoy tratando de corregir los errores habituales IE alrededor CSS 2.1 y necesitan una forma de alterar un alojamiento de estilo elementos para añadir un estilo de texto-align personalizado.

Actualmente en jQuery que puede hacer algo como

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

pero me parece que no puede encontrar una buena manera de alterar el texto a alinear con este mismo enfoque.

El objeto ya tiene una clase y hago establecer el texto-align en esa clase, pero sin suerte. ¿Es posible agregar un atributo text-align css a este elemento después de definir una clase?

que tienen algo como esto

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

justo después de mi ajuste de anchura y después de Veo esto en el quemador, sólo veo "ancho" es la única propiedad establecido en el estilo. ¿Alguna ayuda?

EDIT:

Whoa - gran respuesta en esta pregunta! ¡Gracias a todos los que respondieron! Un poco más de detalle sobre el problema en cuestión:

Estoy modificando la fuente js para jqGrid A3.5 para hacer un trabajo de subred personalizado y el JS real que estoy modificando se muestra a continuación (lo siento por usar "esto "en mis ejemplos anteriores, pero quería que esto sea sencillo para abreviar)

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

he intentado tanto de los siguientes (a partir de las respuestas dadas) 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'); 

Voy a seguir trabajando en este tema hoy y publicar una solución final para que nadie se sienta mi dolor alrededor de este extraño asunto.

Answer 1

Usted tiene la idea correcta, como muestra la documentación:

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

¿Seguro que estás identificar correctamente con esta clase o ID?

Por ejemplo, si la clase es myElementClass

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

Además, no he trabajado con Firebug desde hace tiempo, pero usted está mirando el DOM y no el html? Tu fuente no ha sido modificada por javascript, pero la dom es. Mire en la pestaña dom y vea si se aplicó el cambio.

Answer 2

$(this).css("text-align", "center"); debería funcionar, asegúrese de que 'esto' es el elemento que realmente está tratando de establecer el estilo text-align a.

Answer 3

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

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

Esto debe asegurarse de que otras reglas de estilo no están anulando lo que pensó que funcionaría. Creo que los estilos en línea usualmente tienen precedencia.

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

Answer 4

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

Answer 5

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

La solución es utilizar la capacidad de jQuery para chain y hacer:

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

interesante encontrar, aunque.

Para ampliar un poco, la siguiente no no trabajo

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

y los resultados solamente en la anchura que se establece en el estilo. Encadenar a los dos, como sugerí anteriormente, parece funcionar.

Answer 6

normalmente utilizo

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

Esperamos que ayuda

Answer 7

es correcta?

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

Puede utilizar el nombre de clase y el ID en lugar de esta

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

o

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

Answer 10

suponer a continuación es 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. código del lado del

El cliente será:

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