通过css属性实现可变化的全局样式变量
2020-12-20 12:35
标签：oba type 代理 val export css glob key for 通过css属性实现可变化的全局样式变量 标签：oba type 代理 val export css glob key for 原文地址：https://www.cnblogs.com/smallZoro/p/14029962.html// 代理访问和设置
const options = {
// 主题色
themeColor: ‘red‘,
// 文本主颜色
textColor: ‘#333‘,
// h1 h2 h3 h4 h5
h1: ‘1.6rem‘,
h2: ‘1.4rem‘,
h3: ‘1.2rem‘,
h4: ‘1rem‘,
h5: ‘0.8rem‘
};
const policy = {
themeColor: ‘--theme-color‘,
textColor: ‘--text-color‘,
h1: ‘--h-1‘,
h2: ‘--h-2‘,
h3: ‘--h-3‘,
h4: ‘--h-4‘,
h5: ‘--h-5‘,
};
function setGlobalProperty (type: string, val: string): string {
document.body.style.setProperty(policy[type], val);
return val;
}
Reflect.ownKeys(options).forEach((key: any) => {
setGlobalProperty(key, options[key]);
});
export default function useGlobal () {
return [{ ...options }, setGlobalProperty]
}
文章标题：通过css属性实现可变化的全局样式变量
文章链接：http://soscw.com/index.php/essay/37431.html