Costruisci l'oggetto JavaScript da utilizzare con jQuery .css() (per quanto riguarda le chiavi duplicate?)

Question

Io uso il metodo .css() di jQuery per applicare gli stili a un elemento. Lo faccio in questo modo:

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

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

Il problema di questo è che, ovviamente, io uso le chiavi duplicate in oggetto, che non è cool.

Come posso risolvere questo problema? Devo passare i parametri CSS con nomi duplicati per indirizzare la maggior parte dei browser.

Answer 1

Avere più chiavi con lo stesso nome non è valido, e genererà un errore in modalità rigorosa.

Creare una funzione/plug-in che applica le proprietà del proprio cssObj. Se viene trovata una stringa stringa, imposta una proprietà CSS con il valore desiderato.
Se viene trovato un array, passarlo in loop e aggiornare la proprietà con ciascun valore. Se viene trovato un valore non valido, viene ignorato.

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); 

Answer 2

Sembra che tu suggerisca che il metodo .css() funzioni come gli attributi CSS in un file .css. Non penso che funzioni così. Ma qui ci sono poche alternative:

1. Usa browser sniffing (per cui non è già facendo CSS multi-browser con prefissi vendor?)

2. Usa foglio di stile attuale collegata come <link /> tag

3. Crea <style> taggalo e aggiungi regole ad esso, in modo dinamico.

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

Answer 3

È necessario creare un costume $.cssHooks (more info) che determina quale sia la forma corretta, facendo vari test --- o si può semplicemente utilizzare un classe css con $.fn.addClass.

Answer 4

Il mio consiglio sarebbe quello di inserire il CSS nel proprio foglio di stile nella propria classe e semplicemente aggiungere quella classe al proprio elemento. Il browser stesso determinerà quale delle proprietà background-image supporta e quindi la renderà solo quella.

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"); 

Answer 5

C'è un deposito di cssHooks su GitHub per la maggior parte delle proprietà. Scrivere il tuo gancio è complicato, molti casi limite.

https://github.com/brandonaaron/jquery-cssHooks

Per l'immagine di sfondo sfumato, avresti bisogno:

https://github.com/brandonaaron/jquery-cssHooks/blob/master/gradients.js