<!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. 访问Mat某一个像素值

    mat.at<uchar>(row, col): 如果想要用cout打印出来,前面要加上(int),否则打印出来的是空字符:

  2. 数据库关闭，shutdown三种语句。

    1.shutdown normal     正常方式关闭数据库. 2.shutdown immediate     立即方式关闭数据库.     在SVRMGRL中执行shutdown immedia ...

  3. (转)薛飞 基于VLC的Unity视频播放器（二）

    转自:http://www.manew.com/thread-144229-1-1.html 留个记录.

  4. CS萌新的汇编学习之路(其实是老师作业呵呵哒)Learning of Assembly Language

    第一节课学习汇编语言,做笔记,做笔记 1.概念 首先是汇编语言这门课程的定义以及对于学习高级语言.深入理解计算机系统的作用 软硬件接口机器语言 汇编语言 高级语言 关系 机器语言和汇编语言可移植性差 ...

  5. Scrapy 原理

    Scrapy 原理 一.原理 scrapy 是一个为了爬取网站数据,提取结构性数据而编写的应用框架.可以应用在包括数据挖掘,信息处理或存储历史数据等一系列程序中. 二.工作流程 Scrapy Engi ...

  6. Excel 导入 Mysql

    1.将Excel xls文件 另存为 csv 文件: 2.用记事本打开csv文件,然后另存为编码为utf-8的txt文件: 3.将txt文件后缀更改为csv 4.最后,用phpmyadmin或其他数据 ...

  7. python selenium TouchAction模拟移动端触摸操作（十八）

    最近做移动端H5页面的自动化测试时候,需要模拟一些上拉,下滑的操作,最初考虑使用使用selenium ActionChains来模拟操作,但是ActionChains 只是针对PC端程序鼠标模拟的一系 ...

  8. 从零开始打jar包--补充

    想试一下动态编译的功能,所以想看一下java如何编译 原文见:http://www.cnblogs.com/flashsun/p/7246260.html 但这篇文章有些错误及遗漏之处,导致有些没有办 ...

  9. select大表报错

    MySQL查询大表报错 MySQL执行select操作时候,如果执行查询的表的数据量比较大,就会报错error code 2013.或者报错已杀死,并直接退出MySQL客户端.如下所示: mysql& ...

  10. IOS屏幕旋转思路和实践

    这段时间同事在做一个直播项目,项目有个需求:一个界面需要手动设置屏幕的方向,设置好之后方向不能变化.完成这个需求花了特别大的精力,归因是网上关于屏幕旋转的知识比较凌乱,解决问题花费不少时间,最后决定把 ...