CODEWITHSUNDEEP
jquerycss
Michael Schwartz
Michael Schwartz

Reputation: 8415

JQuery Add Multiple CSS Variables

http://liveweave.com/KDveAy

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
})

Upvotes: 0

Views: 1599

Answers (2)

Josh KG
Josh KG

Reputation: 5140

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
})

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388316

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
})

Upvotes: 3

Related Questions