动态一键换肤实现思路和demo

最新推荐文章于 2024-03-01 15:59:57 发布

疯狂的枫叶

最新推荐文章于 2024-03-01 15:59:57 发布

阅读量695

点赞数

分类专栏： css 文章标签：前端 html5 css

本文为博主原创文章，转载需要注明作者和网址。

本文链接：https://blog.csdn.net/u013814964/article/details/126796720

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

浏览器切换样式无非是通过css，总共有以下三种方法。

内联style
注入style
注入link

那么我们想要实现一键换肤，那么我们为了剥离干净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)
        }