我们在浏览一些网站，尤其是一些小说网站的时候，都会有修改页面背景颜色的地方，这个功能使用jquery很容易实现。

效果图：

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方法找到被点击的按钮，然后在触发的事件中获取该按钮的对应的颜色值，然后通过css（）方法将该颜色值作为background-color的属性值传入。

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

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

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

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

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

  3. 修改UISearchBar背景颜色

    UISearchBar是由两个subView组成的,一个是UISearchBarBackGround,另一个是UITextField. 要IB中没有直接操作背景的属性.方法一:是直接将 UISearc ...

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

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

  5. jquery无法修改网页标题，无法修改网页标题

    今天遇到一个问题,搜索时动态修改网页标题,用jquery的这段代码无效,无论FF还是IE $("title").html("new title"); 后来只好用 ...

  6. 【BIRT】修改主题背景颜色

    下图是BIRT默认的颜色配置,为了跟系统颜色格局相一致,此处需要对颜色进行修改; 下面简单介绍了如何修改不同位置的背景颜色 对应文件地址均在目录:../webcontent/birt/styles下 ...

  7. 【VS开发】修改窗口背景颜色大全

    如何修改frame窗口的背景颜色?  MDI窗口的客户区是由frame窗口拥有的另一个窗口覆盖的.为了改变frame窗口背景的颜色,只需要这个客户区的背景颜色就可以了.你必须自己处理WM_ERASEB ...

  8. 修改cocos2dx 背景颜色

    只需要在AppDelegate的设置FPS后面加入一行: glClearColor(1.0, 1.0, 1.0, 1.0); 同理如果要修改成其它颜色,只需修改里面的值即可( r, g, b, a);

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

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

随机推荐

  1. bzoj 2178 圆的面积并——辛普森积分

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2178 把包含的圆去掉.横坐标不相交的一段一段圆分开算.算辛普森的时候预处理 f( ) ,比如 ...

  2. 理解C/C++中const char*、char* const、const char* const、char* const*等等

    先说些题外话,今天学习execve(2)的使用,由于书上代码使用的是C89标准,所以下面这种代码都被我修改了 char* s[] = { "aaa", "bbb" ...

  3. java代码-----运用endWith()和start（）方法

    总结: package com.a.b; //startWith().和endWith()是检查一个字符串是否以一个特定的字符序列开始或结束 public class Sdfs { public st ...

  4. 怎样用java生成GUID与UUID

    GUID是一个128位长的数字,一般用16进制表示.算法的核心思想是结合机器的网卡.当地时间.一个随机数来生成GUID.从理论上讲,如果一台机器每秒产生10000000个GUID,则可以保证(概率意义 ...

  5. 【学徒日记】Unity 动画调用事件

    http://note.youdao.com/noteshare?id=a15f965fc57a0b25c87ee09388cf0f4a 具体内容看上面的链接. 1. 在脚本里写一个函数,它的参数只能 ...

  6. Linux系统性能检测

    转自:http://www.cnblogs.com/itech/archive/2011/06/08/2075145.html 一 .uptime uptime命令用于查看服务器运行了多长时间以及有多 ...

  7. “，”、“natural join”、“natural left outer join”、“natural right outer join”的用法总结

    “,”:代表笛卡尔积: “natural join”:代表自然连接,即同名列等值连接: “natural left outer join”:表示左外连接: “natural right outer j ...

  8. 短URL链接系统

    定义: 短网址(Short URL),顾名思义就是在形式上比较短的网址.但不知道有多少人像我一样,由于面试问道才知道有这种系统而对短连接原理好奇,从而进行进一步的研究.在Web 2.0的今天,不得不说 ...

  9. 【转】C#调用java类、jar包方法

    原文地址:http://blog.csdn.net/black0707/article/details/5769366 一.将已经编译后的java中Class文件进行打包:打包命令JAR 如:将某目录 ...

  10. 第八章 分布式配置中心：Spring Cloud Config

    Spring Cloud Config 是 Spring Cloud 团队创建的一个全新项目,用来为分布式系统中的基础设施和微服务应用提供集中化的外部配置支持, 它分为服务端与客户端两个部分. 其中服 ...