multiple - jquery css background color

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

Question

Estoy tratando de corregir los errores habituales de IE alrededor de CSS 2.1 y necesito una forma de alterar las propiedades de estilo de los elementos 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 el texto, alinearme con este mismo enfoque.

El elemento ya tiene una clase y configuro text-align en esa clase sin suerte. ¿Es posible agregar un atributo text-align css a este elemento después de definir 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:

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

Estoy retocando la fuente js para jqGrid A3.5 para hacer un trabajo de sub grilla 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 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);

He intentado ambos de los 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 tema hoy y publicaré una solución final para cualquiera que sienta mi dolor por este extraño problema.

Answer 1

¿Es correcto?

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

Answer 2

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

Answer 3

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

La solución es usar la habilidad de jquery para chain y hacer:

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

Interesante hallazgo sin embargo.

Para expandir un poco, lo siguiente no funciona

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

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

Answer 4

También puede intentar 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 creías que funcionaría. Creo que los estilos en línea usualmente tienen precedencia.

EDITAR: Además, otra herramienta que puede ayudarte es Jash ( http://www.billyreisinger.com/jash/ ). Le da un aviso de comando de javascript para que pueda asegurarse de probar fácilmente las declaraciones de javascript y asegurarse de que está seleccionando el elemento correcto, etc.

Answer 5

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

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

¿Estás seguro de que estás identificado correctamente con clase o ID?

Por ejemplo, si tu clase es myElementClass

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

Además, hace tiempo que no trabajo con Firebug, ¿pero estás 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 6

Usualmente uso

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

Espero que ayude

Answer 7

supongamos a continuación 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> 

Answer 8

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

Answer 9

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

Puede usar el nombre de clase y el id en lugar de este

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

o

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

Answer 10

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

function add_question () {var count = document.getElementById ("nofquest"). value; var container = document.getElementById ("contenedor"); // Borrar 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