我们在浏览一些网站，尤其是一些小说网站的时候，都会有修改页面背景颜色的地方，这个功能使用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. 【转】VC 多线程中控制界面控件的几种方法

    原文网址:https://software.intel.com/zh-cn/blogs/2010/11/30/vc-3 为了保证界面的用户体验经常要把数据处理等放到子线程中进行,然后把结果更新到主界面 ...

  2. Linux proc_mkdir和proc_create的用法

    //功能:在proc中创建一个文件夹 //参数1:创建的文件夹名称 //参数2:创建的文件夹路径,就是在哪个文件夹中创建,如果是proc根目录,此参数为NULL //返回值:创建的文件夹路径 stru ...

  3. ubuntu ：扩充虚拟机的磁盘容量

    前言: 开始建立虚拟机的时候给的容量是20G,给了10G的交换空间,所以后来有点不够用了,现在安装软件会出现提示磁盘空间不足,所以需要扩充一下磁盘的容量. 步骤:     1.因为我用的是Vmware ...

  4. Glide源码解析

    基本使用方法: Glide.with(this) .asDrawable() .load("http://i6.topit.me/6/5d/45/1131907198420455d6o.jp ...

  5. 【转】JMeter 通过 JDBC 访问 Oracle 和 MySQL

    JMeter 的手册中描述了如何访问 MySQL,但是没有说明如何访问 Oracle.对于没有 Java 应用开发经验和对 Oracle 不是特别熟悉的朋友,可以参考这篇文章来简单.快速的配置好 JM ...

  6. 使用 maven 构建 SpringMVC

    引言 最近需要使用SpringMVC做一个小项目,之前对SpringMVC没什么了解,所以先写一个SpringMVC的小Demo练习一下. 使用Maven构建项目 IDE = Eclipse 首先创建 ...

  7. java基础循环

    一. while循环 示例1:.循环打印1到10之间的值 public class Test1 { public static void main(String[] args) { int i=1;/ ...

  8. android.support.v4.app.Fragment vs android.app.Fragment 的区别

    android.support.v4.app.Fragment vs android.app.Fragment 的区别 我开过平板相关应用,用了Fragment来处理.后来重新开发另外一个应用,直接引 ...

  9. iOS开发API常用英语名词

    iOS开发API常用英语名词 0. indicating 决定 1.in order to 以便 2.rectangle bounds 矩形尺寸 3.applied 应用 4.entirety 全部 ...

  10. [OpenCV Qt教程] 在Qt图形界面中显示OpenCV图像的OpenGL Widget(第二部分)

    本文译自:http://www.robot-home.it/blog/en/software/tutorial-opencv-qt-opengl-widget-per-visualizzare-imm ...