一行代码获取rgba颜色色值的透明度

简介: 一行代码获取rgba颜色色值的透明度
parseFloat('rgba(255, 255, 255, 0.88)'.match(/(\d(\.\d+)?)+/g).slice(-1));


这样就可以形成一个简单的方法

let getAlpha = rgba => parseFloat(rgba.match(/(\d(\.\d+)?)+/g).slice(-1));


如果传参不是rgba是一个十六进制颜色怎么办???

我们写一个将十六进制颜色转换为rbga色值的方法

let sHex2rgba = sHex => {
    if (!sHex) return 'rgba(0,0,0,0)';
    let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{4}|[0-9a-fA-f]{6}|[0-9a-fA-f]{8})$/;// 十六进制颜色值的正则表达式
    /* 16进制颜色转为RGB格式 */
    let sColor = sHex.toLowerCase(), alpha = 1;
    if (sColor && reg.test(sColor)) {
        if (sColor.length === 4 || sColor.length === 5) {
            let sColorNew = '#';
            for (let i = 1; i < sColor.length; i += 1) sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
            sColor = sColorNew;
        }
        sColor.length === 9 && (alpha = (parseInt('0x' + sColor.slice(7, 9)) / 255).toFixed(2));//如果有透明度再执行
        let sColorChange = [];//处理六位的颜色值
        for (let i = 1; i < 7; i += 2) sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)));
        return `rgba(${sColorChange.join(',')},${alpha})`
    } else return sColor;
}


搭配一起使用就是,非常的灵活!

let getAlpha = rgba => parseFloat(sHex2rgba(rgba).match(/(\d(\.\d+)?)+/g).slice(-1));


相关文章
|
2月前
|
前端开发
字体的颜色(color属性)
【10月更文挑战第7天】字体的颜色(color属性)
56 1
|
7月前
|
JavaScript 前端开发
uVeiw color 颜色值
uVeiw color 颜色值
54 0
|
7月前
(一)如何根据rgba刷成webgl的底色
(一)如何根据rgba刷成webgl的底色
|
4月前
color - 让你的输出带点颜色
color - 让你的输出带点颜色
35 1
|
7月前
|
前端开发
边框宽度和边框颜色
边框宽度和边框颜色。
39 1
|
前端开发
RGB颜色模型
RGB颜色模型
467 0
RGB颜色模型
shape颜色渐变、圆角、半圆角、边框、填充
shape颜色渐变、圆角、半圆角、边框、填充
456 0
shape颜色渐变、圆角、半圆角、边框、填充