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

81

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.

Toran Billups
fuente

Respuestas:

166

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.

Tim Hoolihan
fuente
1
Debería funcionar, pero parece fallar cuando se usa junto con width () configurado previamente. La respuesta es usar el encadenamiento de jquery.
Steerpike
42

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.

kbosak
fuente
12

Yo suelo usar

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

Espero que ayude

Nooshu
fuente
2

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

bperreault
fuente
6
Este solo sería el caso si se configura el estilo utilizando la manipulación DOM de JavaScript vanilla. jQuery css () usa palabras clave css reales en su lugar.
garrow
2

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.

Steerpike
fuente
1

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

John Boker
fuente
0

¿Es correcto?

<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>
usuario2762271
fuente
0
<!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>
Nikit Barochiya
fuente
0
 $(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'});
SNG
fuente
-1

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> 
Siddharam Padamgond
fuente
¿Mejora esto de alguna manera las respuestas dadas?
Nico Haase
-1
function add_question () {var count = document.getElementById ("nofquest"). value; var container = document.getElementById ("contenedor"); // Borrar el contenido anterior del contenedor while (container.hasChildNodes ()) {container.removeChild (container.lastChild); } para (i = 1; i

cómo establecer el centro de los cuadros de texto

Kanchana
fuente
1. Formateo 2. ¿Puede darnos una explicación?
jhpratt