Question

我正在试图找出如何将多个变量添加到单个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
})

Answer 2

jQuery允许您使用速记设置css属性。看到这个答案：

jQuery and Setting CSS with Shorthand

您没有在边框速记中包含必要的空格。试试这个：

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

JQuery添加多个CSS变量

2 个答案: