jquery - 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

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

Answer 2

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

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