set the border opacity using jquery or javascript in the case of color value in hexadecimal

Question

I get border-width,border-color dynamically.

I have to set the opacity for the border.but the border-color value is in the hexadecimal format.

var borderCSS = { border: borderWidth + "px solid "+borderColor};

output is:

 border:10px solid #cccccc;

I don't know how to set the border opacity in this case using jquery or javascript.

http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb — Mohamed-Yousef, May 21 '15 at 05:38

Saeed M.Aghdam · Accepted Answer · 2015-05-21T06:18:39.553

2

Is this case, you have to convert your Hex color to RGB. I just converted Hex to RGB and then used your code to produce the color property:

var borderColor ="#cccccc";
borderWidth=3;
function hexToRgb(hex) {
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}
R = hexToRgb(borderColor).r;
G = hexToRgb(borderColor).g;
B = hexToRgb(borderColor).b;
var borderCSS = "border: "+borderWidth+"px solid rgba("+R+", "+G+", "+B+", "+.5+")";

.5 is opacity value

edited May 21 '15 at 06:18

answered May 21 '15 at 05:40

Saeed M.Aghdam

46
4

is there an inbuilt function called `hexToR();` ? – Tintu C Raju May 21 '15 at 05:46
I tested the code and it worked perfectly. borderCSS is a string variable and all you need to do is to set borderCSS to your DIV's style attribute. – Saeed M.Aghdam May 21 '15 at 06:14

score 0 · Answer 2 · answered May 21 '15 at 06:00

use css() method for setting the border opacity. try using following code

$(document).ready(function(){
    var borderWidth='10';
    var borderColor='#CCCCCC';
    var borderCSS=borderWidth+'px solid '+borderColor;
    $('h1').css('border',borderCSS);
});

or else refer this fiddle

set the border opacity using jquery or javascript in the case of color value in hexadecimal

2 Answers2