multiple - ¿Cómo definir múltiples atributos CSS en jQuery?

prop jquery

Question

¿Hay alguna forma sintáctica en jQuery para definir múltiples atributos CSS sin encadenar todo a la derecha de esta manera:

$("#message").css("width", "550px").css("height", "300px").css("font-size", "8pt");

Si tiene, digamos, 20 de estos, su código será difícil de leer, ¿alguna solución?

Desde jQuery API, por ejemplo, jQuery entiende y devuelve el valor correcto para ambos

.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) 

y

.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }).

Observe que con la notación DOM, las comillas alrededor de los nombres de las propiedades son opcionales , pero con la notación CSS son necesarias debido al guión en el nombre.

Answer 1

De acuerdo con redsquare, vale la pena mencionar que si tienes una propiedad de dos palabras como text-align , harías esto:

$("#message").css({ width: ''30px'', height: ''10px'', ''text-align'': ''center''});

Answer 2

Es mejor usar solo .addClass() incluso si tiene 1 o más. Más mantenible y legible.

Si realmente tienes ganas de hacer varias propiedades CSS, usa lo siguiente:

.css({
   ''font-size'' : ''10px'',
   ''width'' : ''30px'',
   ''height'' : ''10px''
});

¡NÓTESE BIEN!
Cualquier propiedad CSS con un guión debe ser citado.
He colocado las citas para que nadie tenga que aclarar eso, y el código será 100% funcional.

Answer 3

Mejor manera de usar variable

var style1 = {
   ''font-size'' : ''10px'',
   ''width'' : ''30px'',
   ''height'' : ''10px''
};
$("#message").css(style1);

Answer 4

Prueba esto

$(element).css({
    "propertyName1":"propertyValue1",
    "propertyName2":"propertyValue2"
})

Answer 5

Puedes probar esto

$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");

Answer 6

También puedes usar attr junto con el style :

$(''#message'').attr("style", "width:550; height:300; font-size:8px" );

Answer 7

Usando un objeto plano, puede emparejar cadenas que representan nombres de propiedades con sus valores correspondientes. Cambiar el color de fondo y hacer que el texto sea más audaz, por ejemplo, se vería así:

$("#message").css({
    "background-color": "#0F0", 
    "font-weight"     : "bolder"
});

Alternativamente, puede usar los nombres de propiedades de JavaScript también:

$("#message").css({
    backgroundColor: "rgb(128, 115, 94)",
    fontWeight     : "700"
});

Se puede encontrar más información en la documentación de jQuery .

Answer 8

pásale un objeto json

$(....).css({
    ''property'': ''value'', 
    ''property'': ''value''
});

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

Answer 9

por favor intenta esto

$(document).ready(function(){
    $(''#message'').css({"color":"red","font-family":"verdana"});
})

Answer 10

prueba esto:

$ (IDname) .css ({"background": "# 000", "color": "# 000"})

es decir, hola es id en div.

<div id="hello"></div>

Answer 11

$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});

Además, puede ser mejor usar jQuery en addClass para hacer que su proyecto sea más escalable.

Fuente: Cómo: jQuery Agregar CSS y Eliminar CSS

Answer 12

$(''#message'').css({ width: 550, height: 300, ''font-size'': ''8pt'' });