又遇到颜色主题变化，这次使用了jquery+css，使用了函数传值，而不是之前网站换肤改变link的方法。

首先是设置好颜色主题后，点击改变页面颜色主题。（需要自行导入jquery.js后查看效果）

直接贴代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/JavaScript" src="js/jquery.js"></script>

</head>

<style>

    div section{

        width: 30px;

        height: 30px;

        margin: 10px;

        display: inline-block;

    }

    div section:nth-of-type(1){

        background-color: #177cb0;

    }

    div section:nth-of-type(2){

        background-color: #db5a6b;

    }

    div section:nth-of-type(3){

        background-color: #008000;

    }

    div section:hover{

        cursor:pointer;

    }

</style>

<body>

    <div>

        <section onclick="blue()"></section>

        <section onclick="red()"></section>

        <section onclick="green()"></section>

    </div>

    <center>

        <h2 style="display:inline-block;">颜色主题jquery变换</h2>

        <form action="" id="simpleCalc">

            <span>input：</span><input type="text" required><br><br>

            <button id="calc">确认</button>

        </form>

        <span id="result"></span>

    </center>

    <script>

      //设置默认颜色主题

        $(document).ready(function(){

            blue();

        });

        // 点击单个换色

        function blue(){

            change("#177cb0");

        }

        function red(){

            change("#db5a6b");

        }

        function green(){

            change("#008000");

        }

        //设置需要改变颜色的元素及其样式

        function change(colo){

            $("#calc").css("background-color", colo);

            $("h2, span").css("color", colo);

            $("input").css("color", colo);

            $("input[type=text]").focus(function(){$(this).css("outline", "none")});

            $("input[type=text]").focus(function(){$(this).css("border", "2px solid " + colo)});

            $("input[type=text]").blur(function(){$(this).css("border", "1px solid gray")});

        }

    </script>

</body>

</html>

下一篇贴即时变化颜色主题（通过input输入颜色值进行改变）的代码。

如有错误，请您指正！

jquery+css实现网页颜色主题变换（只改变已设置好的几种颜色主题）的更多相关文章

  1. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  2. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  3. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  4. jQuery+css+div--一些细节详解

    (一).首先.让我们认识一下最基本普通的alert()弹出框!(改变alert()提示弹出框的样式) 我们在写html或是jsp页面的时候,谁都不希望自己精心设计,且非常美观的页面颜色布局被破坏掉吧! ...

  5. jQuery中常用网页效果应用

    一.常用网页效果应用 1.表单应用 表单由表单标签.表单域和表单按钮组成. 1.1单行文本框应用 例:获取和失去焦点改变样式 首先,在网页中创建一个表单,HTML代码如下 <form actio ...

  6. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  7. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  8. css+div网页设计（一）--基础知识

    css是网页制作不可缺少的部分,我会用三篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一 ...

  9. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

随机推荐

  1. python随机数的产生

    导入 random模块  >>> import random 1.  random.random random.random()用于生成一个0到1的随机浮点数: 0 <= n ...

  2. [uiautomator篇] 使用uiautomator需要导入uiautomator库

    1 修改依赖文件:build/gradle( 是在app目录下)而不是和app同级目录的build/gradle androidTestCompile 'com.android.support.tes ...

  3. php默认有最大执行时间

    执行php默认有最大执行时间,默认30s,修改,不能设置’1h’,貌似单位不能修改

  4. Iterator设计模式--jdk1.7

    参照:http://www.cnblogs.com/tstd/p/5049338.html java.util.Iterator<E>是一个接口,它的定义如下: public interf ...

  5. 筒子们，使用Protobuf优化你的协议

    Protocol buffers是google提供的一种将结构化数据进行序列化和反序列化的方法,其优点是语言中立,平台中立,可扩展性好,目前在google内部大量用于数据存储,通讯协议等方面.PB在功 ...

  6. 【THUWC2017】在美妙的数学王国中畅游（bzoj5020）

    我数学是真的菜!! 清华光用数学知识就把我吊起来打,我还是太菜了 题解 如果每座城市的 $f$ 都是 $3$,维护一下树的路径上的 $\sum a,\space \sum b$ 即可. 其实就是维护一 ...

  7. 面试题之redis的内存回收策略

    1.maxmemory-policy noeviction(默认):内存空间不足会报错 2.allkeys-lru:最少使用的数据去淘汰 3.allkeys-random:随机淘汰一些key 4.vo ...

  8. DevExpress GridControl 控件点滴

    一.常用控件样式 public void setDgv(DevExpress.XtraGrid.Views.Grid.GridView gridView1) { gridView1.OptionsVi ...

  9. 【CF314C】Sereja and Subsequences（DP，树状数组）

    题意:给定一个N个数的数列,求所有不同不下降子序列的乘积之和,其中不同指的是组成它的数字和长度不完全相同 n (1 ≤ n ≤ 10^5) a[i]<=10^6 思路:考虑DP.设DP[a[i] ...

  10. es6总结 （五）--函数扩展