javascript - 在十六进制颜色值的情况下使用 jquery 或 javascript 设置边框不透明度

Question

我动态获取边框宽度、边框颜色。

我必须设置边框的不透明度。但边框颜色值是十六进制格式。

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

输出是:

 border:10px solid #cccccc;

我不知道如何使用 jquery 在这种情况下设置边框不透明度 或 javascript。

Answer 1

在这种情况下，您必须将十六进制颜色转换为 RGB。我刚刚将 Hex 转换为 RGB，然后使用您的代码生成颜色属性:

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是不透明度值