Can I assign a variable value to multiple attributes at once in Javascript?

Question

Say I want to set horizontal padding of a styled element to variable 'x' and set vertical to a variable 'y'. Of course, this is possible:

var docex = document.getElementById.style;
docex.paddingTop = y;
docex.paddingBottom = y;
docex.paddingLeft = x;
docex.paddingRight = x;

Is there a shorter way for me to do this, such as something akin to:

var docex = document.getElementById.style;
docex.paddingTop = docex.paddingBottom = y;
docex.paddingLeft = docex.paddingRight = x;

However, as I understand it, the above would not work and would declare a global variable, as I saw from another question on this site. So, what would be the most efficient minimal way for me to implement an idea similar to above, that is possible with vanilla javascript?

Thanks in advance!

Just introduce a function which accepts x,y and do the stuff inside the function — Chamika Sandamal
– Chamika Sandamal, Commented Jan 21, 2017 at 12:55
you can do some css trickery for that specific case -> document.getElementById('#id').style.cssText='padding: '+x+' '+y; — japrescott
– japrescott, Commented Jan 21, 2017 at 12:57

Thomas Altmann · Accepted Answer · 2017-01-21 13:06:00Z

2

You can use the shorthand CSS rule for that:

docex.padding = y + " " + x;

This sets y as top and bottom padding and x as left and right padding.

MDN Reference

answered Jan 21, 2017 at 13:06

Thomas Altmann

1,7442 gold badges12 silver badges16 bronze badges

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

1 Comment

Terrornado Over a year ago

Ah, yeah. This wasn't working for me earlier because I was writing it as docex.padding = y + x; without the space in quotation. And I didn't even know writing just two variables means that it assumes horizontal and vertical. Thanks a lot!

Quentin · Accepted Answer · 2017-01-21 13:09:37Z

However, as I understand it, the above would not work and would declare a global variable

It wouldn't.

Compare these two examples:

var foo = bar = 2;

This:

Declares foo as a local variable
Assigns 2 to bar implicitly creating bar as a global while it does it
Assigns bar to foo

obj.foo = obj.bar = 2;

This:

Assigns 2 to obj.bar implicitly creating bar as a property of obj if it doesn't already exist
Assigns obj.bar to obj.foo implicitly creating foo as a property of obj if it doesn't already exist

It doesn't create a global because you don't have any code which mentions a variable name.

That said, since you are changing all the padding properties, you can set the padding shorthand property instead of doing each of the four individually.

padding: <top> <right> <bottom> <left>

or

padding: <vertical> <horizontal>

Thus:

docex.padding = y + " " + x;

ab29007 · Accepted Answer · 2017-01-21 13:09:29Z

0

You can do it using style.padding

var x="50px";
var y="25px";

var ele = document.getElementById('o');

ele.style.padding = y+' '+x;

#o{
  width:200px;
  height:100px;
  border:1px solid black;
  box-sizing:border-box;
}
#i{
  width:100px;
  height:50px;
  background:red;
}

<div id="o">
<div id="i">
  </div></div>

answered Jan 21, 2017 at 13:09

ab29007

7,7662 gold badges19 silver badges44 bronze badges

Collectives™ on Stack Overflow

Can I assign a variable value to multiple attributes at once in Javascript?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related