<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="jquery-3.3.1.min.js"></script>

    <script src="../JQuery/carhartl-jquery-cookie-92b7715/jquery.cookie.js"></script>

    <style>

        #box{

            height: 300px;

            width: 300px;

            border: 2px solid gainsboro;

        }

        .initial{

            background-color: forestgreen;

        }

        .class1{

            background-color: aquamarine;

        }

        .class2{

            background-color: salmon;

        }

        .class3{

            background-color: skyblue;

        }

        .class4{

            background-color: sienna;

        }

        .class5{

            background-color: gold;

        }

    </style>

</head>

<body>

    <div id="input">

        <input type="checkbox" value="class1">

        <input type="checkbox" value="class2">

        <input type="checkbox" value="class3">

        <input type="checkbox" value="class4">

        <input type="checkbox" value="class5">

        <div id="box" class="initial">

        </div>

    </div>

    <!-- <script>

        //原生JavaScript 思路1

        var inputGroup = document.getElementsByTagName("input");

        var inputBox = document.getElementById("input");

        var box = document.getElementById("box");

        console.log(inputGroup);

        for(let i = 0; i < inputGroup.length; i ++){

            var ii = i;

            inputGroup[i].onclick = function(){

                var siblings = inputBox.children;

                var newColor = this.value;

                console.log(newColor);

                for(var j = 0; j < siblings.length;j++){

                    siblings[j].checked = false;

                    console.log(1);

                }

                // this.checked = true;//如果不用this呢？

                console.log(inputGroup[i]);//undefined 说明这里并没有i的数值(使用var而非let时)

                // console.log(inputGroup[ii]);//函数内部的i与循环变量i有各自的作用域 ii始终等于i的最后一个值

                inputGroup[i].checked = true;

                box.style.backgroundColor = newColor;

            }

        }

    </script> -->

    <script>

    //jQuery实现

    var $btnGroup = $("input[type='checkbox']");

    $btnGroup.click(function(){

        $(this).prop("checked",true)

        .siblings().prop("checked",false)

        .end();

        $("#box").prop("class",$(this).val());

        $.cookie("currentSkin",$(this).val(),{path:'/',expires:10});

        var storedSkin = $.cookie("currentSkin");

        console.log($(this).val(),storedSkin);//undefined,需要在服务器下使用

    })

    var storedSkin = $.cookie("currentSkin");

    if(storedSkin){

        // 直接读取cookie，cookie的本质是一个txt字符串

    }

    //整套样式表：

    // <link href = "skin/light.css" rel = "stylesheet" id = "classFile">

    // $("classFile").attr("href","skin/" + $(this).val() + ".css");

    </script>

</body>

</html>

注意这里用到了jQuery的cookie插件，而其需要在服务器下使用，而我是个弟弟哈。本地读取cookie的结果是undefined。

可以读读这位大佬的文章：传送门

--4-17更新--

得益于Appserv，cookie功能也能使用了，成就感比兴趣更能驱动编程...

<script>

    //jQuery实现

    var $btnGroup = $("input[type='checkbox']");

    $btnGroup.click(function(){

        $(this).prop("checked",true)

        .siblings().prop("checked",false)

        .end();

        $("#box").prop("class",$(this).val());

        $.cookie("currentSkin",$(this).val(),{path:'/',expires:10});

        var storedSkin = $.cookie("currentSkin");

        console.log(storedSkin);//本地的话undefined,需要在服务器下使用

    })

    var storedSkin = $.cookie("currentSkin");

    if($.cookie("currentSkin") !== "null"){//这里就不能再"if($.cookie("***"))"了，因为这样无论cookie是否有有效值都会执行

        $("#box").prop("class",storedSkin);

    }else{

        $("#box").prop("class","initial");

    }

    $("#clearCookie").click(function(){

        $.cookie("currentSkin",null);

        $("#box").prop("class","initial");

    });

    </script>

效果~

网页换肤：原生js与jq的更多相关文章

  1. JS实现网页换肤功能效果

    网页换肤的基本原理 使用 JS 切换对应的 CSS 样式表.例如hao123首页的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过 ...

  2. js网页换肤

    使网页背景颜色可选黄/粉 <html> <head> <meta charset="utf-8"> <meta name="ge ...

  3. JS（原生js和jq方式）获取元素属性（自定义属性），删除属性（自定义属性）

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  4. JavaScript网页换肤

    使网页背景颜色可选黄/粉 <!doctype html> <html> <head><title>网页换肤</title></head ...

  5. 基于js的网页换肤（不需要刷新整个页面，只需替换css文件）

    1. [代码][JS]代码    <HTML><HEAD><link ID="skin" rel="stylesheet" typ ...

  6. 网页换肤,模块换肤,jQuery的Cookie插件使用（转）

    具体效果如下: 第一次加载如下图: 然后点击天蓝色按钮换成天蓝色皮肤如下图: 然后关闭网页重新打开或者在打开另一个网页如下图: 因为皮肤用Cookie保存了下来,所以不会重置 具体的实现代码如下: & ...

  7. 原生JS 和 JQ 获取滚动条的高度，以及距离顶部的高度

    JQ:相对比较简便 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 ...

  8. 【转】Javascript+css 实现网页换肤功能

    来源:http://www.php100.com/html/webkaifa/DIV_CSS/2008/1014/2326.html Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作 ...

  9. 原生JS与JQ获取元素的区别

    刚学JQ不久,有时候可能会把JS和JQ获取元素的方式搞错,接下来获取属性方法什么的就一发不可收拾了,现在把两者获取获取元素的代码整理下. 一.原生JS获取元素. 1.常用的三种方式获取元素对象(将指定 ...

随机推荐

  1. 高通平台获取secure boot，串号等状态

    adb shell下 运行./system/bin/r address 其中address对应各个flag参数的地址,具体如下: 无法打开/dev/mem节点(没有该节点),这时只需在内核配置中选上C ...

  2. ue4 StringTable

    StringTable 用法很简单可以参考 https://blog.csdn.net/u012801153/article/details/80393531 这里只说说上面文章中没提到的小技巧  T ...

  3. java中二维数组内存分配

    区分三种初始化方式: 格式一: 数据类型[][] 数组名 = new 数据类型[m][n]; m:表示这个二维数组有多少个一维数组. n:表示每一个一维数组的元素有多少个. //例:int arr[] ...

  4. 移除元素-leetcode-27

    class Solution {public:    int removeElement(vector<int>& nums, int val) {        if(nums. ...

  5. system.net.httpclient 4.0 vs2015

    // 加入Cookie foreach (string a in cookieStr.Split(';')) { cookieContainer.Add(new Cookie(a.Split('=') ...

  6. PythonStudy——PyCharm使用技巧 Column Selection Mode（列选择模式）

    PyCharm的Column Selection Mode提供了列选择功能. 使用: 在当前文件右键->Column Selection Mode->用鼠标垂直选择文本 快捷键:Alt + ...

  7. soapui的简单使用

    工具下载地址:https://www.soapui.org/downloads/soapui.html 名词解释 https://www.cnblogs.com/fcfblog/p/5830205.h ...

  8. CSS Core Technology

    1. Selector Different types of selectors: Selectors can be divided into the following categories: Si ...

  9. 尝试 Markdown 写测试用例

    我的原帖https://testerhome.com/topics/9412 大家都知道我们社区的帖子提倡用Markdown格式编写,正好项目进入稳定期,尝试用Markdown写下测试用例.有几个目的 ...

  10. json2.js JSON解析程序

    源码: /* http://www.JSON.org/json2.js 2010-03-20 Public Domain. NO WARRANTY EXPRESSED OR IMPLIED. USE ...