关于css获取属性值

参考

01

行内样式

第一种方法直接写成行内样式直接获取参数值

例：如下就是直接获取背景颜色值

const color = ['#fff','#000']
color.map(c => 
)

定义变量，获取变量

外部参数申明成变量，css文件使用var()获取变量值，使用setproperty更改变量的值

例：

// tsx文件

...
    

    
    


// css文件
#body-color {
    --lineColor: #ff6600;
    --backGColor: #F1EBFF;
    ...
    
    .body-bac {
        backgroundColor: var(--backGColor);
        borderColor: var(--lineColor);
    }
    ...
}

// js文件
const domStyleChange = document.getElementById('body-color').style
domStyleChange.setproperty('--lineColor',red)
...

02

还有一种使用attr获取html传参？？？

参考
通过html自定义属性传参，css伪元素接受这个参数
举个栗子：通过data-*自定义属性，给div绑定一个char的属性值为：abc

// html
 
    abc
 
// css，下方高亮部分
.box::before{content:attr(data-char);display: block;position: absolute;right: 0;bottom: 0;color: red;}

效果图