jQuery 添加多个 CSS 变量

Question

http://liveweave.com/KDveAy

我正在尝试弄清楚如何像这样将多个变量添加到单个 css 属性中......

'border' : divborder + divborderstyle + bcolor,

等于...

border: 3px solid black;

但是代码不起作用。我想知道这是否可行，还是我必须改为定义边框颜色、边框样式等？

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

Answer 1

我认为问题是组件之间没有空格分隔符

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

或

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