use variable for jquery css property name

Question

I have seen plenty of threads asking how to use a variable for jquery's css method like

var black='#000000';
$(this).css({'color':black});

but none of how to use variables the other way round like

var bg='background-color';
$(this).css({bg:'#000000'});

For me it doesn't work like that, so I am asking, is there a way to make something like that work, to save some space when using 'background-color' a bunch of times in a script?

Thanks!

How about var obj={}; obj[bg]=black; $(this).css(obj) ?

Rayon
– Rayon

2016-03-03 10:29:54 +00:00
Commented Mar 3, 2016 at 10:29 — Rayon
– Rayon, Commented Mar 3, 2016 at 10:29

Fabrizio Calderan · Accepted Answer · 2016-03-03 10:37:55Z

5

if it's a single property you could write in this way

var bg = 'background-color';
$(this).css(bg, '#000000');

if you need to pass an object you could define the background-color key as a variable inside squared brackets

var bg = 'background-color';

var obj = {};
obj[bg] = '#000000';
$(this).css(obj);

edited Mar 3, 2016 at 10:37

answered Mar 3, 2016 at 10:30

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

3 Comments

Rayon Over a year ago

OP wants to pass object as argument...You can not set many styles using syntax provided by you..

Fabrizio Calderan Over a year ago

@RayonDabre I don't see this as a strict requirement for the OP: “is there a way to make something like that“ - anyway I've edited and show both the ways

lharby Over a year ago

This obj method just saved my bacon, it's a really nice method.

Rayon · Accepted Answer · 2016-03-03 10:32:19Z

2

Use bracket notation to use variable as key of the object

var obj = {};
var bg = 'background-color';
var black = '#000000';
obj[bg] = black;
$('div').css(obj)

div {
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>Hello</div>

answered Mar 3, 2016 at 10:32

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

Comments

Arun P Johny · Accepted Answer · 2016-03-03 10:33:19Z

1

Just use the version of .css(propertyName, value) that takes the style name and parameter

$('div').each(function() {
  var bg = 'background-color';
  $(this).css(bg, '#000000');
})

div {
  margin-bottom: 5px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>some</div>
<div>test</div>

answered Mar 3, 2016 at 10:33

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

use variable for jquery css property name

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related