I'm trying to create vars for some styles that i want to and reuse, but can't seem to get it to work. What am I doing wrong?
var bgColor = "'background' : 'rgb(102,204,0)'";
var textColor = "'color' : 'rgb(40,40,40)'";
$('.className').css({bgColor, textColor});
Taking a look at the documents on jquery css if you wanted to apply these values in a single call you'd need to create valid json. Per the documents:
var validValues =
{
"background-color": "#ffe",
"border-left": "5px solid #ccc"
};
or
var validValues =
{
backgroundColor: "#ffe",
borderLeft: "5px solid #ccc"
}
then
$(selector).css(validValues);
Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name
specifically the reason yours does not work is the following does not create valid json for jquery:
var bgColor = "'background' : 'rgb(102,204,0)'";
var textColor = "'color' : 'rgb(40,40,40)'";
var json = {bgColor, textColor};
json =
{
bgColor: "'background' : 'rgb(102,204,0)'",
textColor: "'color' : 'rgb(40,40,40)'"
}
Try:
var bgColor = "rgb(102, 204, 0)";
var textColor = "rgb(40, 40, 40)";
$('.className').css({ "background" : bgColor, "color" : textColor });
If you wanted to use a variable structure like JSON:
var styleJson =
{
'background' : 'rgb(102, 204, 0)',
'color' : 'rgb(40, 40, 40)'
}
$('.className').css(styleJson)
css basically refers to the style attribute in jquery.
In order to use it via js variables, you can convert it as an array.
var bgColor = ['background','rgb(102,204,0)'];
var textColor = ['color' , 'rgb(40,40,40)'];
$('.className').css(bgColor[0], bgColor[1]);
$('.className').css(textColor[0], textColor[1]);
Example : http://jsfiddle.net/49byztbx/
You may also try this
var styles = {'background-color':'rgb(102,204,0)', 'color':'rgb(40,40,40)'}
$('.className').css(styles);
