Включите стили CSS в переменные JS?

Question

Я пытаюсь создать vars для некоторых стилей, которые я хочу и повторно использовать, но, похоже, не может заставить его работать. Что я делаю не так?

var bgColor = "'background' : 'rgb(102,204,0)'"; 
var textColor = "'color' : 'rgb(40,40,40)'"; 

$('.className').css({bgColor, textColor}); 

Answer 1

Try:

var bgColor = "rgb(102, 204, 0)"; 
var textColor = "rgb(40, 40, 40)"; 

$('.className').css({ "background" : bgColor, "color" : textColor }); 

Если вы хотите использовать переменную структуру типа JSON:

var styleJson = 
{ 
    'background' : 'rgb(102, 204, 0)', 
    'color' : 'rgb(40, 40, 40)' 
} 

$('.className').css(styleJson) 

Answer 2

css в основном относится к атрибуту style в JQuery.

Чтобы использовать его через переменные js, вы можете преобразовать его как массив.

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

Пример: http://jsfiddle.net/49byztbx/

Answer 3

Взглянув на documents on jquery css, если вы хотите применить эти значения в одном вызове вы должны создать действительный JSON. За документы:

var validValues = 
{ 
    "background-color": "#ffe", 
    "border-left": "5px solid #ccc" 
}; 

или

var validValues = 
{ 
    backgroundColor: "#ffe", 
    borderLeft: "5px solid #ccc" 
} 

затем

$(selector).css(validValues); 

Обратите внимание, что с обозначениями DOM, кавычки вокруг имен свойств не являются обязательными, но с CSS нотации они требуется из-за дефиса в названии

конкретно причина твоя не работает, заключается в следующем, не создает правильный JSON для 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)'" 
} 

Answer 4

Вы также можете попробовать этот

var styles = {'background-color':'rgb(102,204,0)', 'color':'rgb(40,40,40)'} 
$('.className').css(styles);