前端主题切换方案-知识分享-创世云图-连接更好的世界__成都小程序开发_成都APP开发_微信营销推广_聚合支付_智慧旅游_智慧医院_一部手机游_社会综合治理平台

前端主题切换方案

2023.03.31

243

左迁

前端主题切换方案

方案1：link标签动态引入

方案二提前引入所有主题样式，做类名切换

/* day样式主题 */ body.day .box { color: #f90; background: #fff; } /* dark样式主题 */ body.dark .box { color: #eee; background: #333; } .box { width: 100px; height: 100px; border: 1px solid #000; }

<div class="box"> <p>hello</p> </div> <p> 选择样式： <button onclick="change('day')">day</button> <button onclick="change('dark')">dark</button> </p>

function change(theme) { document.body.className = theme; }

前端主题切换方案

方案二提前引入所有主题样式，做类名切换

相关新闻

网站建设基本知识，这些你需要知道！

Ubuntu如何挂载U盘的方法

公众号文章新增长语音功能