css风格皮肤样式切换

半兽人 发表于: 2020-01-29   最后更新时间: 2020-03-29 23:34:45  
{{totalSubscript}} 订阅, 1,859 游览

实现原理,基于link标签的disable

代码:

<!DOCTYPE />
<html>
<head>
    <meta charset="utf-8">
    <title>setTimeout</title>
    <link class="codestyle" rel="prefetch alternate stylesheet" href="./c1.css">
    <link class="codestyle" rel="prefetch alternate stylesheet" href="./c2.css">
    <script type="text/javascript">
        //link 切换
        var style = 'c1';
        function initSnippet() {
            for (let link of document.querySelectorAll('.codestyle')) {
                link.rel = 'stylesheet';
                link.disabled = !link.href.match(style + '\\.css$'); //正则中"."需要转义,加个"\","\"又需要转义
            }

        }
        addEventListener('load', initSnippet);
        setTimeout(function () {
            style = "c2";
            initSnippet();
        }, 1000)
    </script>
</head>
<body>
    <div style="width: 100px;height: 100px;"></div>
</body>
</html>

c1.css

div {
    background-color: #f00;
}

c2.css

div {
    background-color: #0f0;
}
css
更新于 2020-03-29
在线,3小时前登录

查看css更多相关的文章或提一个关于css的问题,也可以与我们一起分享文章