前端实现主题切换的几种方式

前端 实现 主题 切换的几种方式

A li t tle of BB：嗯，今天看到了某些网站主题效果，闲来无事，写篇文章来记录一下对于主题的实现，有哪些方式，也顺带给新手小伙伴们提供个思路。

1，老规矩，贴代码

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    <title>切换主题</title>
    <style>
        #box_1,#box_2,#box_3{
            width: 300px;
            height: 200px;
            border: 1px solid black;
            background: palevioletred;
        }
        #area_show_1,#area_show_2,#area_show_3{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            float: right;
            margin-right: 20px;
        }

        /*第二种方式用到*/
        #area_show_2.red{background: red;}
        #area_show_2.yellow{background: yellow;}
        #area_show_2.orange{background: orange;}

        label.red{color: red;}
        label.yellow{color: yellow;}
        label.orange{color: orange;}
        /*第二种方式用到*/
    </style>
    <script type="text/javascript" src="../js/common/jquery-1.7.js"></script>
    <link rel="stylesheet" class="for_theme" theme_type="red" href="../css/theme_1.css">
    <link rel="stylesheetttttt" class="for_theme" theme_type="yellow" href="../css/theme_2.css">
    <link rel="stylesheetttttt" class="for_theme" theme_type="orange" href="../css/theme_3.css">
</head>
<body>
    <div id="box_1">
        <label style="color: red">第一种方式</label>
        <select id="to_chose_1">
            <option attr_id="red">红色</option>
            <option attr_id="yellow">黄色</option>
            <option attr_id="orange">橙色</option>
        </select>
        <div id="area_show_1" style="background: red"></div>
    </div>

    <div id="box_2">
        <label class="red">第二种方式</label>
        <select id="to_chose_2">
            <option attr_id="red">红色</option>
            <option attr_id="yellow">黄色</option>
            <option attr_id="orange">橙色</option>
        </select>
        <div id="area_show_2" class="red"></div>
    </div>

    <div id="box_3">
        <label>第三种方式</label>
        <select id="to_chose_3">
            <option attr_id="red">红色</option>
            <option attr_id="yellow">黄色</option>
            <option attr_id="orange">橙色</option>
        </select>
        <div id="area_show_3" class="red"></div>
    </div>
<script>
    //第一种，用jq的css方法直接设置作用于行内样式
    $(document).on("change","#to_chose_1",function () {
        var _this = $(this);
        var color = _this.find("option:checked").attr("attr_id");
        $("#area_show_1").css("background",color);
        $("#box_1 label").css("color",color);
    });

    //第二种，用选择器切换设置法
    $(document).on("change","#to_chose_2",function () {
        var _this = $(this);
        var color = _this.find("option:checked").attr("attr_id");
        console.log(color);
        $("#area_show_2").removeProp("class");
        $("#area_show_2").addClass(color);
        $("#box_2 label").addClass(color);
    });

    //第三种，引用css样式文件切换法
    //利用link标签的rel属性，属性值设置为非stylesheet的值，再根据自定义标记的theme_type来灵活选择
    //这里为了把别的非主题的css区分开，把主题的css引用单独加个class=for_theme来区分，就是别的css文件免遭修改(你懂我意思吧)
    $(document).on("change","#to_chose_3",function () {
        var _this = $(this);
        var color = _this.find("option:checked").attr("attr_id");
        //先把所有的主题都作废，然后再将对应的主题设置上
        $(".for_theme").attr("rel","qwerty");
        $('.for_theme[theme_type="'+color+'"]').attr("rel","stylesheet");//按照选择器格式灵活拼接，别看不懂了哈
    });
</script>
</body>
</html>