¿Es posible pasar variables a la función css de jquery?

Question

Me gustaría establecer css de un elemento div dinámicamente utilizando la función jQuery css() en lugar de utilizar cadenas literales/constantes de cadena para la función css(). ¿Es posible?

En lugar de utilizar los siguientes códigos con cadenas literales:

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

me gustaría utilizar variables para establecer CSS para #myDiv elemento como el

Versión 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); 

Versión 2: (solo codificado para ver si funcionan sin llamar a funciones personalizadas como la versión 1 anterior):

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

Ambas versiones variables de los códigos no funcionan. Por favor ayuda. Gracias.

Answer 1

El código que publicó aquí debería funcionar. He hecho las dos versiones de lo que intenta hacer varias veces. Si no funciona, hay una buena posibilidad de que algo esté mal en otro lugar en su javascript O que no tenga el selector/id correcto para los elementos que desea cambiar.

Intente agregar alert("test"); inmediatamente después de $('#divLeftReportView').css(propertyName, value);. Si obtiene la ventana emergente que dice "prueba", entonces el problema está en su selector. Si no, entonces el problema es un error en tu javascript.

También intente agregar $('#divLeftReportView').css("background-color", "#00ff00"); en el mismo lugar. Eso confirmará si el selector está funcionando o no.

Answer 2

parece funcionar bien en http://jsfiddle.net/gaby/6wHtW/

Asegúrese de ejecutar su código después del evento ready DOM ..

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

de lo contrario sus elementos podrían no estar presentes en el DOM ..

Answer 3

Tus dos ejemplos funcionarán bien. Yo sugeriría enfoque sólo un poco más limpio (preferencia personal sintaxis):

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

Aquí es a working fiddle.

Si desea dar un paso más allá, puede devolver un mapa de CSS en lugar de cuerdas:

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

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

Aquí es a working fiddle.

Answer 4

También puede pasar múltiples parámetros CSS dentro de una variable como una matriz:

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