programmatically decide which style attribute to modify in javascript

Question

I have a situation where, depending on a variable value, I will want to modify EITHER the margin-top OR margin-bottom property of a div.

Apart from using an "if else", is there any way of doing it kinda like this :

var whichmargin="marginTop";
document.getElementById('myElement').style.whichmargin = '100px';

If you get what I mean lol ?

By the way, I am using vanilla JS rather than jQuery.

I don't want to use SetAttribute as I don't want to alter any other of the div style.

Any ideas much appreciated:

Nothing wrong with an if-else, just a bit less code this way :) — Chris Jones, Mar 19 '14 at 16:06

score 4 · Accepted Answer · answered Mar 19 '14 at 15:50

4

using the [] syntax:

var value = 'somethingelse';
var whichmargin = value === 'something' ? "marginTop" : "marginBottom";
document.getElementById('myElement').style[whichmargin] = '100px';

answered Mar 19 '14 at 15:50

progysm

1,072
6
7

Yesss!!! Thank you so much - I KNEW I had done it before but couldn't remember :) MUCH Appreciated. – Chris Jones Mar 19 '14 at 15:54

programmatically decide which style attribute to modify in javascript

1 Answers1