JQuery Add Multiple CSS Variables

Question

I'm trying to figure out how to add multiple variables to a single css property like so...

'border' : divborder + divborderstyle + bcolor,

equal to...

border: 3px solid black;

However the code doesn't work. I was wondering if this is possible, or am I going to have to define border-color, border-style, etc instead?

var bcolor = $('input[name=bcolor]').val(),
    bgcolor = $('input[name=bgcolor]').val(),
    divborderstyle = $('#divborderstyle').val(),
    divborder = $('#divborder').val();

$(gen_box).css({
     'position'  : 'absolute',
     'top'       : y_begin,
     'left'      : x_begin,
     'width'     : width,
     'height'    : height,
     'border'    : divborder + divborderstyle + bcolor,
     'background': bgcolor
})

Arun P Johny · Accepted Answer · 2013-10-12 04:16:29Z

I think the problem is there is no space separator between the components

$(gen_box).css({
     'position'  : 'absolute',
     'top'       : y_begin,
     'left'      : x_begin,
     'width'     : width,
     'height'    : height,
     'border'    : divborder + ' ' + divborderstyle + ' ' + bcolor,
     'background': bgcolor
})

or

$(gen_box).css({
     'position'  : 'absolute',
     'top'       : y_begin,
     'left'      : x_begin,
     'width'     : width,
     'height'    : height,
     'border-color'    : bcolor,
     'border-style'    : divborderstyle,
     'border-width'    : divborder,
     'background': bgcolor
})

Community · Accepted Answer · 2017-05-23 12:21:08Z

3

jQuery allows you to set css properties using shorthand. See this answer:

jQuery and Setting CSS with Shorthand

You are not including the necessary spaces in your border shorthand. Try this:

$(gen_box).css({
     'position'  : 'absolute',
     'top'       : y_begin,
     'left'      : x_begin,
     'width'     : width,
     'height'    : height,
     'border'    : divborder + ' ' + divborderstyle + ' ' + bcolor,
     'background': bgcolor
})

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Oct 12, 2013 at 4:28

Josh KG

5,1503 gold badges23 silver badges24 bronze badges

Collectives™ on Stack Overflow

JQuery Add Multiple CSS Variables

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related