css/js使用小技巧记录

1、白底小图标换色

.iconBox {
        position: relative;
        width: 19px;
        height: 19px;
        overflow: hidden; // 隐藏原本颜色的图片
     .icon {
          position: absolute;
          left: -100%;
          width: 19px;
          height: 19px;
　　　     filter: drop-shadow(19px 0 0 red);
        }
 }

隐藏前：

隐藏后： 

2、颜色转换（"#fff" -> "255,255,255"）

const getRGBA = (color: string) => { // 比较憨的写法，待优化
    const colorArr = color.split('');
    if (colorArr.length > 4) {
      return `${parseInt(colorArr[1] + colorArr[2], 16)},${parseInt(colorArr[3] + colorArr[4], 16)},${parseInt(colorArr[5] + colorArr[6], 16)}`;
    } else {
      return `${parseInt(colorArr[1] + colorArr[1], 16)},${parseInt(colorArr[2] + colorArr[2], 16)},${parseInt(colorArr[3] + colorArr[3], 16)}`;
    }
  }

3、判断是否为数值可以使用：

!isNaN(parseFloat(value));