码迷,mamicode.com
首页 > Web开发 > 详细

css样式切换

时间:2019-11-07 10:07:11      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:ref   正则   isa   listen   标签   add   char   selector   its   

代码实现参考:https://highlightjs.org/

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

演示代码:

index.html

<!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样式切换

标签:ref   正则   isa   listen   标签   add   char   selector   its   

原文地址:https://www.cnblogs.com/xunhanliu/p/11809778.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!