把 CSS 样式变成 JS 变量？

Question

我正在尝试为我想要和重用的某些样式创建 var，但似乎无法使其正常工作。我究竟做错了什么？

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

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

Answer 1

试试：

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

你也可以试试这个

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

Answer 3

css基本上是指jquery中的style属性。

为了通过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 4

查看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 表示法，由于名称中的连字符，它们是必需的

特别是你的不起作用的原因是以下没有为 jquery 创建有效的 json：

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)'"
}