Change CSS/animate propertyName with ternary operator

Question

How can we change propertyName/s with ternary operators?

For example:

var horizontal = false,
    propertyName = horizontal ? 'left' : 'top';

$(".elem").css({
    propertyName: value
});

I've found some answers, but they do not fit to my circumstances.

https://stackoverflow.com/a/5973518/1250044

https://stackoverflow.com/a/12228404/1250044

Praveen Kumar has found a possibility. But yet still no final!

OK, I think the best answer is, as Explosion Pills Explosion Pills said:

var horizontal = false;

$(".elem").css(horizontal ? {
    left: 10
} : {
    top: 10
});

Live as Fiddle.

true or false... any boolean!

yckart
– yckart

2012-10-12 06:22:46 +00:00
Commented Oct 12, 2012 at 6:22 — yckart
– yckart, Commented Oct 12, 2012 at 6:22

Peter Mortensen · Accepted Answer · 2016-02-24 18:24:45Z

4

You cannot evaluate a variable when declaring an object in literal notation.

Instead, you can directly give it this way:

elem.css((horizontal ? 'left' : 'top'), value);

Fiddle: http://jsfiddle.net/YXyng/

edited Feb 24, 2016 at 18:24

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Oct 12, 2012 at 6:21

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

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

15 Comments

Ben Over a year ago

Smart. I don't need it today, but this will be used in the future for one or more of my projects.

yckart Over a year ago

That's clear, I've put the ternary operator in a variable for more clarity... By the way: This does not work yet! jsfiddle.net/73hcs

Praveen Kumar Purushothaman Over a year ago

Wait. Am trying it out too. :( Same issue. It worked someway, but not now. Now am getting Uncaught SyntaxError: Unexpected token ILLEGAL. Will soon update the answer and fiddle. :)

Praveen Kumar Purushothaman Over a year ago

Okat @yckart I will try some more, to get some working stuff. If not, then you have to work with how JSON is built!

Christoph Over a year ago

@PraveenKumar I didn't mean to offend you. I just wanted to point out that Java Script Object Notation "per accident" looks like the Literal Notation used in javascript but has nothing to do with javascript (like JAVAscript has nothing to do with java). css() takes no JSON, it takes an (javascript)-object as parameter. In which notation this object is created doesn't matter. (Instead of the Literal Notation you can use a constructor or add properties directly via dot or bracket-notation)

|

Christoph · Accepted Answer · 2012-10-12 07:24:16Z

1

You cannot directly hand over a variable value as identifier for an objectproperty but you can do the following:

var value = "15px";
var horizontal = true;
var propertyName = horizontal ? 'left' : 'top';
var parameters = {};
parameters[propertyName] = value;

elem.css(parameters);

See it live in this fiddle.

edited Oct 12, 2012 at 7:24

answered Oct 12, 2012 at 7:18

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

1 Comment

Praveen Kumar Purushothaman Over a year ago

Good one! :) Way to go! Didn't think of this!

Collectives™ on Stack Overflow

Change CSS/animate propertyName with ternary operator

2 Answers 2

You cannot evaluate a variable when declaring an object in literal notation.

Fiddle: http://jsfiddle.net/YXyng/

15 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

You cannot evaluate a variable when declaring an object in literal notation.

Fiddle: http://jsfiddle.net/YXyng/

15 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related