css风格皮肤样式切换

半兽人 发表于: 2020-01-29   最后更新时间: 2020-03-29  

实现原理,基于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动画-音波效果