使用jQuery将自定义样式字符串应用于div

Question

I have a javascript variable with the following value:

var style ="border-left:12px solid;border-color:red;position:relative;"

How can I apply it to a div like below:

<div class='my-div'></div>

I tried:

$('.my-div').css({style});

but failed spectacularly :(

Answer 1

var style = {
    borderLeft:'12px solid',
    borderColor:'red',
    position:'relative'
}

The object should look like this. The CSS method takes in an object param. Doing a style string concat will work, but it's ugly.

Or use a class and be simple.

$('.my-div').css(style); //append style object to jQuery object

Note that using this object notation can also be beneficial because the properties can have logic in them, say for animations, or changing value dependencies.