这篇文章主要为大家详细介绍了射流研究…实现一键换肤效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了射流研究…实现一键换肤效果的具体代码，供大家参考，具体内容如下
方法一
！文档类型超文本标记语言
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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。