又遇到颜色主题变化，这次使用了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. js适配根字体大小

    方法一:<script>                (function (doc, win) {                var docEl = doc.documentElem ...

  2. [python学习篇][书籍学习][python standrad library][内建函数]之[list,open,len,pow,range,

    Python 解释器内置了一些函数,它们总是可用的.这里将它们按字母表顺序列出.     Built-in Functions     abs() divmod() input() open() st ...

  3. [译]pandas中的iloc loc的区别？

    loc 从特定的 gets rows (or columns) with particular labels from the index. iloc gets rows (or columns) a ...

  4. HDU——1027Ignatius and the Princess II（next_permutation函数）

    Ignatius and the Princess II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K ( ...

  5. linux maven安装（三）

    1.下载maven http://maven.apache.org/download.cgi 我下载的是:apache-maven-3.3.9-bin.tar.gz 解压:tar -zxvf apac ...

  6. springboot中的controller注解没有生效

    springboot中的controller注解没有生效  , 启动的Application类没有在controller的父目录或同级目录

  7. bzoj 2803 [POI2012]prefixuffix hsh+性质

    题目大意 bzoj 2803 对于两个串S1.S2,如果能够将S1的一个后缀移动到开头后变成S2,就称S1和S2循环相同.例如串ababba和串abbaab是循环相同的. 给出一个长度为n的串S,求满 ...

  8. javaweb学习总结(十八)——JSP属性范围（转）

    所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...

  9. 電池的標稱電壓 與 power consumption 量測

    電池標稱電壓 定義如下圖, 以25度為例,20度再往上點, 4V 放一下電就往下掉, 3V 放一下電就往下掉, 假設 3.8V 是擁有最多 capacity 可以 discharge 的電壓,放電放了 ...

  10. /sys/class/gpio 文件接口操作IO端口(s3c2440)

    http://blog.csdn.net/mirkerson/article/details/8464231 在嵌入式设备中对GPIO的操作是最基本的操作.一般的做法是写一个单独驱动程序,网上大多数的 ...