我们在浏览一些站点，尤其是一些小说站点的时候，都会有改动页面背景颜色的地方，这个功能使用jquery非常easy实现。

效果图：

show you code:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jquery test</title>

<script src="jquery-1.11.1.min.js"></script>

</head>

<body>

<button style="background-color:white" value="white">white</button>

<button style="background-color:red" value="red">red</button>

<button style="background-color:green" value="green">green</button>

<button style="background-color:yellow" value="yellow">yellow</button>

<div class="show">

</div>

<script>

	$("button").click(

		function()

		{

			var color = this.value;

			$("body").css("background-color",color);

		}

	)

</script>

</html>

我们先依据元素名选择我们要操作的对象：button，然后使用click方法找到被点击的button，然后在触发的事件中获取该button的相应的颜色值。然后通过css（）方法将该颜色值作为background-color的属性值传入。

jquery入门 改动网页背景颜色的更多相关文章

  1. jquery入门 修改网页背景颜色

    我们在浏览一些网站,尤其是一些小说网站的时候,都会有修改页面背景颜色的地方,这个功能使用jquery很容易实现. 效果图: show you code: <!doctype html> & ...

  2. 借助Html制作渐变的网页背景颜色

    借助Html制作渐变的网页背景颜色 <html> <head> <title>制作渐变背景</title> <meta http-equiv=&q ...

  3. Javascript技巧实例精选(1)—鼠标选择动态改变网页背景颜色

    >>点击这里下载html源文件代码<< 采用Javascript实现,用鼠标点击相应颜色,动态改变网页背景颜色 这是截图 相应的Javascript源代码为: var hex ...

  4. JS点击更换网页背景颜色

    JS部分 <script type="text/javascript"> // 定义可换的颜色 var colors = ["#ff0000", & ...

  5. jquery animate 改变元素背景颜色

    通过animate不能直接设置css样式可以通过https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.j ...

  6. JavaScript实现网页背景自动变色

    JavaScript实现网页背景自动变色,自己变换颜色,设定时间和颜色值即可,在你设定的颜色值.一定时间内自动切换网页背景颜色. <!DOCTYPE HTML PUBLIC "-//W ...

  7. JavaScript实例技巧精选(14)—动态变化背景颜色

    >>点击这里下载完整html源码<< 这是截图: 网页背景颜色随时间变化,核心代码如下: <SCRIPT LANGUAGE="JavaScript"& ...

  8. jquery动态改变背景颜色插件

    GETHUB下载地址 背景颜色用animate方法时时无法改变颜色的 所以要使用插件进行补充. 用法: <!DOCTYPE html> <html> <head> ...

  9. android:改动PagerTabStrip中的背景颜色，标题字体的样式、颜色和图标以及指示条的颜色

    1.改动PagerTabStrip中的背景颜色 我们在布局中直接设置background属性就可以: <android.support.v4.view.ViewPager android:id= ...

随机推荐

  1. 《Redis设计与实现》学习笔记

    第2章 简单动态字符串(SDS) redis的字符串不是直接用c语言的字符串,而是用了一种称为简单动态字符串(SDS)的抽象类型,并将其作为默认字符串. redis中包含字符串值的键值对在底层都是由S ...

  2. 注解实现json序列化的时候自动进行数据脱敏

    https://blog.csdn.net/liufei198613/article/details/79009015

  3. 【PAT】1103 Integer Factorization（30 分）

    The K−P factorization of a positive integer N is to write N as the sum of the P-th power of K positi ...

  4. 001.etcd简介及单节点使用

    一 etcd简介 1.1 概述 etcd 是 CoreOS 团队发起的开源项目,是一个管理配置信息和服务发现(service discovery)的项目,它的目标是构建一个高可用的分布式键值(key- ...

  5. Bootstrap css-表格

    前言:整理的东西比较基础,有不足的地方欢迎大家批评指正! 1,Bootstrap基本的表格结构 源代码: <table class="table">   <cap ...

  6. UOJ.41.[清华集训2014]矩阵变换(稳定婚姻)

    题目链接 稳定婚姻问题:有n个男生n个女生,每个男/女生对每个女/男生有一个不同的喜爱程度.给每个人选择配偶. 若不存在 x,y未匹配,且x喜欢y胜过喜欢x当前的配偶,y喜欢x也胜过y当前的配偶 的完 ...

  7. TreeMap（红黑树）源码分析

    1. HashMap.Entry(红黑树节点) private static final boolean RED = false; private static final boolean BLACK ...

  8. B+/-Tree原理

    B-Tree介绍 B-Tree是一种多路搜索树(并不是二叉的):       1.定义任意非叶子结点最多只有M个儿子:且M>2:       2.根结点的儿子数为[2, M]:       3. ...

  9. 喵哈哈村的魔法考试 Round #2 (Div.2) 题解

    喵哈哈村的魔法考试 Round #2 (Div.2) 题解 A.喵哈哈村的战争 题解: 这道题就是for一遍,统计每个村子的战斗力的和,然后统计哪个村子的战斗力和大一点就好了. 唯一的坑点,就是这道题 ...

  10. SlickMaster.NET 开源表单设计器快速使用指南

    前言:在企业数据处理过程中,经常需要通过定制表单来输入业务数据.由于涉及的数据比较离散,并不同于ERP系统的紧密关联数据.假如由开发人员每个增加页面,工作量会比较大,后期后期的维护很升级也耗费时间和精 ...