Jquery CSS边框

Question

Alright so I've made a small script that I use to alter the border of a div but it doesnt seem to work

This is my code

function changeBorderType(px, rr, gg, bb) {
        $("#colorBox").css({"border":  px+"px "+ getBorderType() +" rgb("+ rr +","+ gg +","+ bb +");"});
        console.log("border: " + px+"px "+ getBorderType() +" rgb("+ rr +","+ gg +","+ bb +");");
    }

Output that Iam getting from the console.log is correct tho

border: 1px solid rgb(231,212,164);

But on the page there are no effects at all, the border doesnt change or anything as such.

I also tried inspecting the element to see if there are any changes or so but it seems there aint no changes at all

EDIT:

Just to add up, this is my current CSS (default one)

#colorBox {
    width: 40%;
    height: 80%;
    background-color: rgb(0,0,0);
    display: inline-block;
    margin-top: 20px;
    border: 1px solid rgb(136,104,121);
}

Answer 1

Here is the fix, based on your jsfiddle:

 var pixelsSet = 5; var red = 10; var green = 122; var blue = 155; changeBorderType(pixelsSet, red, green, blue); function changeBorderType(px, rr, gg, bb) { $("#box").css({"border": px+"px " +" solid "+ "rgb("+ rr +","+ gg +","+ bb +")"}); console.log("border: " + px+"px "+" solid "+" rgb("+ rr +","+ gg +","+ bb +")"); } 

 #box { width: 50px; height: 50px; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="box"> </div> 

Problems solved:
1. There was an extra semicolor at the end of the border's value.
2. There was an extra space after the border key (it was border ).

Answer 2

Semicolon ( ; ) is not a valid css value. Which you have in your last value,

1px solid rgb(231,212,164);

So, your current code,

"border":  px+"px "+ getBorderType() +" rgb("+ rr +","+ gg +","+ bb +");"

Update it to,

"border":  px+"px "+ getBorderType() +" rgb("+ rr +","+ gg +","+ bb +")"

Sample,

 $(function() { var style1 = "1px solid rgb(231,212,164);"; var style2 = "1px solid rgb(231,212,164)"; $('#previousColorBox').css({ 'border': style1 }); $('#colorBox').css({ 'border': style2 }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="previousColorBox"> My Previous Color Box </div> <div id="colorBox"> My Color Box </div>