前言
浏览器切换样式无非是通过css，总共有以下三种方法。
那么我们想要实现一键换肤，那么我们为了剥离干净dom和css。我们只能选择style和link这两种方法。
核心思路
在html的head内部插入（更新）style 和 link 实现。
因为link有不局限跨域的优势，我们先以 link 为例子。
通过link实现动态换肤
首先创建一个link元素，并且设置样式相关属性。
const linkDom = document.createElement('link')
linkDom.href = href
linkDom.rel = "stylesheet"
linkDom.type = "text/css"
但是我们如果直接使用 document.head.appendChild(linkDom)来切换布局,那切换几次就会导致head里多很多不必要的link标签。为了解决这个，我们需要声明id，通过替换来实现单例模式。
function writeLink(id = 'linkCss', href) {
const oldStyleDom = document.getElementById(id)
const linkDom = document.createElement('link')
linkDom.href = href
linkDom.rel = "stylesheet"
linkDom.type = "text/css"
linkDom.id = id
oldStyleDom ? document.head.replaceChild(linkDom, oldStyleDom) : document.head.appendChild(linkDom)
}
完整的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style></style>
<body>
<div>
<button id="theme-toggle">Now light, Click switch to dark mode</button>
<p>白天红色，晚上黑色</p>
</div>
<script>
function writeLink(id = 'linkCss', href) {
const oldStyleDom = document.getElementById(id)
const linkDom = document.createElement('link')
linkDom.href = href
linkDom.rel = "stylesheet"
linkDom.type = "text/css"
linkDom.id = id
oldStyleDom ? document.head.replaceChild(linkDom, oldStyleDom) : document.head.appendChild(linkDom)
}
window.onload = function () {
const themeToggle = document.getElementById('theme-toggle');
console.log('themeToggle', themeToggle)
writeLink('linkCss', 'https://pangyiming.github.io/light.css')
themeToggle.addEventListener('click', () => {
// if it's light -> go dark
if (themeToggle.innerText.includes('Now light')) {
writeLink('linkCss', 'https://pangyiming.github.io/dark.css')
themeToggle.innerText = 'Now dark, Click switch to light mode';
} else {
// if it's dark -> go light
writeLink('linkCss', 'https://pangyiming.github.io/light.css')
themeToggle.innerText = 'Now light, Click switch to dark mode';
}
})
}
</script>
</body>
</html>
效果如下(如果没有效果，大家可以复制代码本地运行，我确保他是可运行的，至于 码上掘金 为什么失灵时不灵。。。@掘金)：
值得一说的是github pages太方便了。简直是一个免费的静态资源服务。我们代码中的css文件便是从github pages中来的。大家可以参考我的另一篇文章# 2022 如何在 GitHub 上搭建个人网站（github.io）
通过style实现动态换肤
function writeStyle(id = 'styleCss', originStyle) {
const oldStyleDom = document.getElementById(id)
const cssText = originStyle.replace(/[\n\t\r]/ig, '')
const styleDom = document.createElement('style')
styleDom.innerText = cssText
styleDom.id = id
oldStyleDom ? document.head.replaceChild(styleDom, oldStyleDom) : document.head.appendChild(styleDom)
}
