È possibile passare variabili alla funzione css di jquery?

Question

Vorrei impostare il css di un elemento div in modo dinamico utilizzando la funzione jQuery css() invece di utilizzare stringhe letterali/costanti stringa per la funzione css(). È possibile?

Invece di usare i seguenti codici con le stringhe:

$('#myDiv').css('color', '#00ff00'); 

Vorrei utilizzare le variabili per impostare i CSS per #myDiv elemento come

Versione 1:

var propertyName = get_propery_name(myVariable1); // function get_propery_name() returns a string like 'background-color' 
var value = get_value(myVariable2) ; // function get_value() returns a string like '#00ff00' 
$('#myDiv').css(propertyName, value); 

Version 2: (semplicemente codificato per vedere se funzionano senza chiamare funzioni personalizzate come la precedente versione 1):

var propertyName = 'background-color'; 
var value = '#00ff00'; 
$('#divLeftReportView').css(propertyName, value); 

Entrambe le versioni variabili dei codici non funzionano. Per favore aiuto. Grazie.

Answer 1

Il codice che hai postato qui dovrebbe funzionare. Ho fatto entrambe le versioni di quello che stai cercando di fare più volte. Se non funziona, ci sono buone probabilità che qualcosa non funzioni da qualche altra parte nel tuo javascript OPPURE che non hai il selettore/id corretto per gli elementi che vuoi modificare.

Provare ad aggiungere alert("test"); immediatamente dopo $('#divLeftReportView').css(propertyName, value);. Se ottieni il popup che dice "test", allora il problema è con il tuo selettore. In caso contrario, il problema è un bug nel tuo javascript.

Prova anche ad aggiungere $('#divLeftReportView').css("background-color", "#00ff00"); nello stesso luogo. Ciò confermerà se il selettore sta funzionando o meno.

Answer 2

sembra funzionare bene in http://jsfiddle.net/gaby/6wHtW/

Assicurati si esegue il codice dopo l'evento ready DOM ..

$(function(){ 
    var propertyName = 'background-color'; 
    var value = '#00ff00'; 
    $('#divLeftReportView').css(propertyName, value); 
}); 

altrimenti i vostri elementi potrebbero non essere presenti nel DOM ..

Answer 3

Entrambi i tuoi esempi funzioneranno perfettamente. Vorrei suggerire l'approccio appena un po 'più pulito (sintassi preferenza personale):

$(document).ready(function() { 
    $('#myDiv').css(get_propery_name(myVariable1), get_value(myVariable2)); 
} 

Ecco a working fiddle.

Se si vuole prendere un ulteriore passo avanti, è possibile restituire una mappa CSS invece delle stringhe:

$('#divLeftReportView').css(GetCssMap("foo")); 

function GetCssMap(mapIdentifier) { 
    return { "background-color" : "#00ff00" } 
} 

Ecco a working fiddle.

Answer 4

È possibile anche passare più parametri CSS all'interno di una variabile come un array:

$(function(){ 
    var divStyle = {'background-color': '#00ff00', 'color': '#000000'} 
    $('#divID').css(divStyle); 
});