如何使用jQuery创建颜色变量？

Question

我不确定这是否可行。但这个概念与SASS变量类似，但使用的是jQuery。所以我想说我想为jQuery提供可重用的CSS属性。例如......

我想创建一个我可以重复用于黑色的变量

var black = .css('color','#000');
var white = .css('color','#FFF');

这显然不起作用，因为语法错误......但是你得到了我希望的图片......所以后来我可以这样做......

$('#myelement').css(black);

是否可以做这样的事情？

Answer 1

css()可以获取代表CSS属性的键值对的映射。因此，您可以存储和使用具有所需CSS属性的键值对。

var black = {'color': '#000'};
var white = {'color': '#FFF'};

$('#myelement').css(black);

这些可以包含任意数量的属性。例如：

var headingStyle = {'background-color': '#C00', 'color': '#FFF'};
$('h1#heading').css(headingStyle);

您甚至可以根据特定样式创建新样式并为其添加属性：

var mainHeadingStyle = $.extend({'font-size': '50px'}, headingStyle);
$('h1#main').css(mainHeadingStyle);

Answer 2

您可以将对象传递给css（）调用。 这样做：

var white = {'color' : '#fff'};
var black = {'color' : '#000'};
$('#myElement').css(white); 
$('#otherElement').css(black);