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