<!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. 1130-Host '192.168.0.105' is not allowed to connect to this MySQL server的解决方案

    在CentOS 7服务器(192.168.0.118)上安装mysql5.7.17后,在本地(192.168.0.105)通过Navicat连接服务器上的MySQL报错,报错如图所示: Paste_I ...

  2. django之Form组件补充

    自定义验证规则 方法一: from django.forms import Form from django.forms import widgets from django.forms import ...

  3. vue-----样式绑定 事件处理

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name=& ...

  4. gtest 参数化

    前言: 在测试用例中,我们时常需要传给被测函数不同的值,gtest为我们提供了简便的方法,可以使我们能够灵活的进行参数化测试. 步骤: 1.创建一个类,继承testing::TestWithParam ...

  5. python练习题3：N的多次方

    N的多次方 描述 编写一个程序,计算输入数字N的0次方到5次方结果,并依次输出这6个结果,输出结果间用空格分隔.其中:N是一个整数或浮点数. print()函数可以同时输出多个信息,采用如下方法可以使 ...

  6. C 逻辑运算, 移位运算 , 取整 , 取模(取余)

    一. 按位运算 (快速操作数据的某个位) ^   按位异或 ~  按位取反 &  按位与 |  按位或 二. 逻辑运算 &&  逻辑与   有一个值为 0 ,值为 0 ||  ...

  7. js for循环中定义clike事件由于闭包导致的循环变量获取不到的问题

    在网上找的 记下来以备不时之需 案例; 本人有一个数组按钮  循环数组按钮 给每个按钮添加click事件 原本以为搞定但是出现了 每个按钮都是数组最后的方法 然后查找问题 发现onclike事件中的i ...

  8. LOJ 2551 「JSOI2018」列队——主席树+二分

    题目:https://loj.ac/problem/2551 答案是排序后依次走到 K ~ K+r-l . 想维护一个区间排序后的结果,使得可以在上面二分.求和:二分可以知道贡献是正还是负. 于是想用 ...

  9. SSHD启动失败，错误码255

    查看/etc/ssh/sshd_config 发现,Listen Address并不是我想要的ip,将其注释掉 sshd restart,结果返回 Permission denied (publick ...

  10. upstream timed out (10060: A connection attempt failed because the connected party did not properly respond

    openresty 错误日志报错内容: // :: [error] #: * upstream timed : A connection attempt failed because the conn ...