2012-05-25 15 views
10

estoy muy cansado de sintaxis como esta:jQuery:.. Cansado de css() css() css()

.css('position','absolute').css('z-index',z-index) 
.css('border','1px solid #00AFFF').css('margin','-1px 0px 0px -1px') 
.css('left',pleft) 

Me pregunto si hay alguna manera de pasar todos los parámetros de una función, algo como:

.foo('position':'absolute','z-index':z-index, 
    'border':'1px solid #00AFFF','margin':'-1px 0px 0px -1px', 
    'left':pleft) 

Mucho agradecería cualquier ayuda.

+1

FYI, tu código no es válido 'z-index' no es un nombre de variable válido, pero' z' menos 'index' suponiendo que ambas variables existan; de lo contrario, es un error. – ThiefMaster

+0

Es para preguntas como esta que existe http://api.jquery.com. Además, si está haciendo muchos cambios CSS en línea, configure una hoja de estilo y simplemente use 'addClass (" myclass ");' –

+0

, sí, fue solo un ejemplo ... Nunca tuve esas variables :) – Anonymous

Respuesta

34

Sí, pasar un objeto a .css() (también mentioned in the docs):

.css({ 
    position: 'absolute', 
    left: pleft, 
    zIndex: 123 
    ... 
}); 

Tenga en cuenta que puede utilizar ambas sintaxis de las teclas: zIndex, es decir, el camelCase que se puede utilizar directamente en JavaScript y 'z-index' (se requieren cotizaciones ya que el - podría romper las cosas de otra manera).

Para opciones que son siempre los mismos - en su caso, probablemente position, border y margin - Podría ser una buena idea para una regla CSS estilo a través de un selector de clase/Identificación. Entonces solo tendrías que establecer las opciones restantes (dinámicas) a través del .css().

+0

Además, consulte ejemplo en los documentos: http://api.jquery.com/css/#example-1-3 –

+0

¡Gracias! esto es muy útil, es extraño que haya extrañado los documentos otra vez ... – Anonymous

9

definen el estilo de clase separada

css

.myCustomClass 
{ 
    position: absolute; 
    border: 1px solid #00AFFF 
} 

y JS

.addClass('myCustomClass'); 

Y esto es muy sencillo de manejar si estilos van demasiado compleja

+1

No responde su pregunta y no funciona si necesita algunos valores dinámicos. Él todavía necesita '.css()' para ellos. – ThiefMaster

+0

@ThiefMaster de todos modos, para ciertas situaciones esta es una buena solución, vale la pena mencionar :) – archil

+0

que es correcto ThiefMaster, he estado usando clases para otros fines, pero este no es el caso – Anonymous

0
$(element).css({'position':'absolute','z-index':zIndex, 
    'border':'1px solid #00AFFF','margin':'-1px 0px 0px -1px', 
    'left':pleft}); 
+0

use .css ({}); ... – Thulasiram

+0

Todavía contiene el error 'z-index' que tenía el OP. – ThiefMaster