How to create color variables with jQuery?

Question

I am not sure if this is possible. But the concept is similar to SASS variables but using jQuery instead. So lets say I wanted to have reusable CSS attributes for jQuery. For example...

I want to make a variable that I can reuse for the color black

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

This obviously doesn't work because the syntax is wrong... but you get the picture I hope.. So then later I could do this...

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

Is it possible to do something like this?

Pass an object. var white = {color: "#000"}

Larry Battle
– Larry Battle

2012-05-17 21:34:39 +00:00
Commented May 17, 2012 at 21:34 — Larry Battle
– Larry Battle, Commented May 17, 2012 at 21:34

rid · Accepted Answer · 2012-05-17 21:49:18Z

8

css() can take a map of key-value pairs that represent the CSS attributes. Therefore, you could store and use key-value pairs with the desired CSS attributes.

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

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

These can contain any number of attributes. For example:

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

You could even create new styles based on a certain style and add attributes to them:

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

edited May 17, 2012 at 21:49

answered May 17, 2012 at 21:34

rid

64k31 gold badges159 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gabitzish · Accepted Answer · 2012-05-17 21:36:47Z

1

You can pass an object to you css() call. Do this:

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

answered May 17, 2012 at 21:36

gabitzish

9,7117 gold badges47 silver badges67 bronze badges

Collectives™ on Stack Overflow

How to create color variables with jQuery?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related