这篇文章主要为大家详细介绍了射流研究…实现一键换肤效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了射流研究…实现一键换肤效果的具体代码，供大家参考，具体内容如下
方法一
！文档类型超文本标记语言
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题一键换肤/标题
风格
:root {
-颜色：白色；
}。卡片{
宽度：120像素
高度：200像素
}。控制器{
显示器：flex
justify-content:space-between；
对齐-项目：居中；
填充：10px
}。btn {
边框：无；
高度：30px
宽度：100像素
颜色：# eeeeee
背景：线性渐变(45度，#ce7777，浅蓝色，#c19fc1，透明);
边框半径：999像素；
box-shadow:0 0 2px 2px # eeeeee；
光标：指针；
}。卡片{
边框半径：5px
box-shadow: 0 0 2px 2px rgb(126，124，124)；
}。卡片：第n个孩子(1) {
背景：黑色；
}。卡片：第n个孩子(3) {
背景：白色；
}
html，正文{
背景：var(-color)；
不透明度：0.9;
}
正文{
身高：100vh
}
*{
边距：0;
填充：0;
}
/风格
/头
身体
div class=控制器
div class=card/div
div button class= BTN onclick=更改皮肤()一键换肤/按钮/div
div class=card/div
/div
/body
/html
方法2
！文档类型超文本标记语言
html lang=en
头
meta charset=UTF-8
meta http-equiv= X-UA-Compatible content= IE=edge
meta name= viewport content= width=device-width，initial-scale=1.0
标题更改皮肤/标题
style id=theme
:root {
-bgColor:# f00；
}。皮肤{
背景：var(-bgColor)；
宽度：200像素
高度：200像素
}
/风格
/头
身体
div class=skin/div
button type= button onclick= change skin( black )更改主题/按钮
脚本
changeSkin=(主题)={
console.log(函数启动);
document.getElementById(theme )。innerHTML=
:root {-bgColor:$ { theme }；}。皮肤{
背景：var(-bgColor)；
宽度：200像素
高度：200像素
}
`
}
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
