<!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. 解决微信浏览器无法使用window.location.reload刷新页面

    function reload(){ window.location.href=window.location.href+"?id="+10000*Math.random(); }

  2. 14. Encryption tools （加密工具 8个）

    SSH(Secure Shell)现在是无处不在的程序,用于在远程机器上登录或执行命令. 它通过不安全的网络在两个不受信任的主机之间提供安全的加密通信,取代了可怕的不安全的telnet / rlogi ...

  3. 10. Firewalls （防火墙 2个）

    Netfilter是在标准Linux内核中实现的强大的包过滤器. 用户空间iptables工具用于配置. 它现在支持数据包过滤(无状态或有状态),各种网络地址和端口转换(NAT / NAPT),以及用 ...

  4. 控制使用jquery load()方法载入新页面中的元素

    最近在项目中用到jquery的load()方法来加载页面,首先简单说一下load()方法. load(url,data,callback);该方法接收三个参数,第一个是载入的页面地址,第二个是要传到服 ...

  5. JavaEE基本框架（Struts2+Spring+MyBatis三层，Struts MVC）之间的关系

    郭晨 软件151 1531610114 [整理]JavaEE基本框架(Struts2+Spring+MyBatis三层,Struts MVC)之间的关系 visio文件下载 概述 一个JavaEE的项 ...

  6. Spring BOOT的学习笔记

    1,静态文件夹src/main/resources/static下的,图片必须放在images文件夹下才能访问,直接放在static下不能访问 2,配置热部署,否则修改下Html,图片都得重启 htt ...

  7. Django 00-socket、wsgi及初始django学习心得

    HTTP基本原理1.http简述:http协议永远都是客户端发起请求,服务端回送请求.客户端和服务端本质上是一个socket客户端和服务端,http协议可以说是基于socket的再上层封装2.http ...

  8. 记一个在移动端调试 web 页面的方法

    1. 工具:Weinre 2. 安装:npm -g install weinre | npm install weinre -g --registry=https://registry.npm.tao ...

  9. [蓝桥杯]PREV-27.历届试题_蚂蚁感冒

    问题描述 长100厘米的细长直杆子上有n只蚂蚁.它们的头有的朝左,有的朝右. 每只蚂蚁都只能沿着杆子向前爬,速度是1厘米/秒. 当两只蚂蚁碰面时,它们会同时掉头往相反的方向爬行. 这些蚂蚁中,有1只蚂 ...

  10. Redis配置不当致使root被提权漏洞

    Redis配置不当致使root被提权漏洞 Dear all~ 最近Redis服务被曝出因配置不当,可能造成数据库被恶意清空,或被黑客利用写入后门文件造成进一步入侵,请关注! 一.漏洞发布日期 2015 ...