<!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. C语言中sizeof、strlen函数的部分理解

    一.测试环境 Win10 + Visual Studio 2017 二.测试代码 #include "pch.h" #include <iostream> #inclu ...

  2. 去除 chrome 上保存密码后的 input 框的屎黄色背景

    网上找的设置 background-color,background-image 没用,后来找到这个方法测试有效: input:-webkit-autofill { transition: backg ...

  3. 关于使用jQuery操作dom时的一点发现

    <body> <ul> <li>list item 1</li> <li>list item 2</li> <li> ...

  4. mysql 生成时间序列数据 - 存储过程

    由于时间自动转换为int值, 做一步转化,也可在调用时处理 use `test`; CREATE table test.test1 as SELECT state, id, `规格条码`, `色号条码 ...

  5. 微软MSDN原版Windows Server 2008 R2 With SP1下载

    Windows Server 2008 R2是windows 服务器版本Windows Server 2008 R2继续提升了虚拟化.系统管理弹性.网络存取方式,以及信息安全等领域的应用,其中有不少功 ...

  6. python3-基础5

    #函数 1 什么是函数? 2 为什么要用函数? 3 函数的分类:内置函数与自定义函数 4 如何自定义函数 5 语法 6 定义有参数函数,及有参函数的应用场景 7 定义无参数函数,及无参函数的应用场景 ...

  7. CentOS7.5实践快速部署LAMP+Tomcat成功运行阿里云或者腾讯云

    安装一定要按照顺序来 1 先安装JDK+TOMCAT 点击看这里 2 在安装LAMP  点击看这里 3 最关键的就是这里 LAMP+Tomcat整合 我们不用源码编译安装,而是使用yum命令来完成. ...

  8. Dell Inspiron 620 / Vostro 260 BIOS 开启 AHCI 模式

    1.Dell Vostro 260 台式机,WIN7 旗舰版   2.登陆 DELL 官方支持站点,获取 MS-A10.exe 安装文件   3.从网络中获取 AMIBCP.exe 工具,双击打开此程 ...

  9. HTTP请求的502、504、499错误

    1.名词解释 502 Bad Gateway:作为网关或者代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应(伪响应). 504 Gateway Time-out:作为网关或者代理工作的服务 ...

  10. wine install

    # yum -y groupinstall 'Development Tools' # yum -y install libX11-devel libxml2-devel libxslt-devel ...