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

Question

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

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-alinee con este mismo enfoque.

El objeto ya tiene una clase y que establece el texto a alinear en esa clase, pero sin suerte. ¿Es posible sólo tiene que añadir un atributo CSS text-align 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 anchura y después de Veo esto en el quemador, sólo veo "ancho" es la única propiedad establecido en el estilo. Cualquier ayuda?

EDIT:

Whoa - gran respuesta a esta pregunta! Un poco más de detalle el problema que nos ocupa:

Estoy retocando la fuente js para jqGrid A3.5 hacer algunos sub personalizada rejilla el trabajo y los reales JS estoy ajustes se muestran a continuación (lo siento por el uso de "este" 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 documentación muestra:

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? Su origen no es cambiado por el javascript, pero el DOM es. Busque en la pestaña Dom y ver si se aplica el cambio.

Answer 2

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 suelen tener precedencia.

EDIT: Además, otra herramienta que puede ayudar es Jash ( http://www.billyreisinger.com/jash/). Se le da una línea de comandos JavaScript para que pueda asegurarse de que probar fácilmente javascript declaraciones y asegúrese de que está seleccionando el elemento de la derecha, etc.

Answer 3

Yo suelo usar

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

Espero que ayude

Answer 4

Creo que se debe utilizar "textAlign" en lugar de "text-align".

Answer 5

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

La solución es utilizar la capacidad de jquery para cadena y hacer:

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

hallazgo interesante.

Para ampliar un poco, hace la siguiente no de trabajo

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

y resultados sólo en la anchura que se establecen en el estilo. Encadenamiento de los dos, como he sugerido más arriba, parece que no funciona.

Answer 6

$(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 7

¿Es correcto?

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

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

o

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

Answer 10

función add_question () {     recuento var = document.getElementById ( "nofquest") valor.;     contenedor var = document.getElementById ( "contenedor");             // contenido anteriores claras del envase             while (container.hasChildNodes ())             {                 container.removeChild (container.lastChild);             }             for (i = 1; i

cómo configurar el centro de los cuadros de texto

Answer 11

supongamos que 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 de párrafo en jQuery.

El código del lado del cliente será:

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