2011-12-10 23 views
7

Utilizo el método .css() de jQuery para aplicar estilos a un elemento. Lo hago así:Objeto JavaScript de compilación para usar con jQuery .css() (¿qué pasa con las claves duplicadas?)

var cssObj = { 
    'background-color' : '#000', 
    'background-image': '-webkit-linear-gradient(top,#000,#fff)', 
    'background-image': 'linear-gradient(top,#000,#fff)' 
}; 

$(".element").css(cssObj); 

El problema con esto es que, obviamente, yo uso duplicados de las llaves en el objeto, que no es fresco.

¿Cómo puedo resolver este problema? Necesito pasar los parámetros de CSS con nombres duplicados para abordar la mayoría de los navegadores.

+0

¿Qué pasa con una secuencia de comandos de detección del explorador? – FishBasketGordo

+0

Eso funcionaría, pero no sería una buena solución ... – j7nn7k

+1

@FishBasketGordo Preguntémosle a [Lex Luthor] (http://www.youtube.com/watch?v=McAeQiLmEYU) qué piensa sobre la detección del navegador \ o/ – Raynos

Respuesta

11

Tener múltiples teclas con el mismo nombre no es válida, y generará un error en modo estricto.

Cree una función/complemento que aplique las propiedades de su cssObj. Si se encuentra un par de cuerdas, establezca una propiedad CSS con el valor deseado.
Si se encuentra una matriz, recorrala y actualice la propiedad con cada valor. Si se encuentra un valor no válido, se ignora.

DEMO: http://jsfiddle.net/RgfQw/

// Created a plugin for project portability 
(function($){ 
    $.fn.cssMap = function(map){ 
     var $element = this; 
     $.each(map, function(property, value){ 
      if (value instanceof Array) { 
       for(var i=0, len=value.length; i<len; i++) { 
        $element.css(property, value[i]); 
       } 
      } else { 
       $element.css(property, value); 
      } 
     }); 
    } 
})(jQuery); 

// Usage: 
var cssObj = { 
    'background-color': '#000', 
    'background-image': ['-webkit-linear-gradient(top,#000,#fff)', 
         'linear-gradient(top,#000,#fff)'] 
}; 
$(".element").cssMap(cssObj); 
+0

¡Gran Rob! ¡Funciona de maravilla! THX – j7nn7k

+1

+1 por lo que es un complemento –

+0

Gran respuesta, buena técnica. Agregado a favoritos para su uso posterior. –

-1

Parece que implica que el método .css() funciona como atributos CSS en un archivo .css. No creo que funcione así. Pero aquí hay algunas alternativas:

  1. Uso browser sniffing (¿por qué no lo está haciendo ya CSS multi-navegador con prefijos de proveedores?)

  2. Uso de estilo real vinculado como <link /> etiqueta

  3. Crear <style> etiquetar y agregarle reglas dinámicamente.

  4. atributo Uso estilo: $('#my').attr('style', 'background: ...; bakground: ...; border-radius: ...; -moz-border-radius: ...;');

+0

De lo que leo en los documentos jQuery debería funcionar. Consulte .css (mapa) en http://api.jquery.com/css/ – j7nn7k

0

Es necesario crear una costumbre $.cssHooks (more info) que determina cuál es la forma correcta, haciendo varias pruebas --- O usted podría utilizar una clase css con $.fn.addClass.

2

Mi consejo sería poner su CSS en su hoja de estilo en su propia clase, y simplemente agregar esa clase a su elemento en su lugar. El navegador en sí determinará cuál de las propiedades background-image soporta, y por lo tanto solo renderizará esa.

CSS

.gradient-bg { 
    background-color: #000; 
    background-image: -webkit-linear-gradient(top, #000, #fff); 
    background-image: linear-gradient(top, #000, #fff) 
} 

jQuery

$(".element").addClass("gradient-bg"); 
+0

Los valores de color son variables en el script real, por lo que este no funcionaría sin problemas. – j7nn7k

Cuestiones relacionadas