我们在浏览一些网站，尤其是一些小说网站的时候，都会有修改页面背景颜色的地方，这个功能使用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. Android中关于JNI 的学习（五）在C文件里使用LogCat

    Log是开发过程中.对于我们调试程序非常重要的一个工具,有非常多时候,我们正是通过Log才干够看清楚程序是不是真的依照我们想像中的模式在跑,从而定位到问题所在的地方.而在Android开发中,毫无疑问 ...

  2. Linux环境下安装zookeeper

    1. 下载安装文件zookeeper-3.4.6.tar.gz 镜像地址1: http://apache.fayea.com/zookeeper/ 镜像地址2: http://mirrors.hust ...

  3. 1.远程仓库的使用（github）

    1.登录Github,新建一个仓库(远程仓库) (1)使用Github账号密码登录 (2)点击+旁边的小三角,选择new repository--输入repository name--点击create ...

  4. Java语言与C语言混合编程(2)--在Java中调用C语言本地库

    在上一篇文章中介绍了Java语言中的native关键字,以及Java语言调用C语言的编译生成本地动态链接库(DLL)实现加法运算的小例子,本文通过一个更加详细的例子,深入讲解Java语言调用C语言的函 ...

  5. redis+php实现微博功能（三）

    个人主页显示微博列表(自己及关注人的微博列表) /*获取最新的50微博信息列表,列出自己发布的微博及我关注用户的微博 *1.根据推送的信息获取postid *2.根据postid获取发送的信息 */ ...

  6. Spring Boot Maven 打包可执行Jar文件

    本文转载自:http://blog.csdn.net/smilecall/article/details/56288972 Maven pom.xml 必须包含 <packaging>ja ...

  7. Firewalld的panic模式

    原文地址:http://www.excelib.com/article/289/show Firewalld有一种Panic模式,Panic的单词含义为“恐慌”.“惊慌”,在firewalld中他表示 ...

  8. mybatis实现继承映射

    ORM 框架的优势在于能让我们利用面向对象的思维去操作数据库, hibernate 作为重量级的 ORM 框架对面向对象的支持很强大.作为半自动化的 mybatis ,对面向对象的支持也是很完备的.这 ...

  9. Linux性能监控 - CPU、Memory、IO、Network

    一.CPU 良好状态指标 CPU利用率:User Time <= 70%,System Time <= 35%,User Time + System Time <= 70%. 上下文 ...

  10. 实现Runnable接口和继承Thread类

    如果欲创建的线程类已经有一个父类了,就不能再继承Thread类了,java不支持多继承.  实现Runnable接口: package multyThread; public class MyRuna ...