我们在浏览一些网站，尤其是一些小说网站的时候，都会有修改页面背景颜色的地方，这个功能使用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. DZ X3 和 ECshop 通过uc_server实现会员同步整合教程.

    会员数据整合是实现商城和论坛系统共享会员数据.论坛系统注册会员整合后可直接在商城登陆.现以本人社区为例.本人社区采用DZ最新的X3.1 商城采用的ECshop最近的V2.7.3 现在想把两个模板整合在 ...

  2. Python 函数 -getattr()

    getattr(object, name[, default]) getatt() 函数用于返回一个对象属性值.object 对象.name 字符串,对象属性.object 默认返回值,如果不提供该参 ...

  3. 可以方便配合 Git 的现代编辑器

    可以方便配合 Git 的现代编辑器 虽然有些人说编辑器不重要,有人用记事本来编辑 PHP(我是不推荐的),但学是要推荐一些现在编辑器. 可以很方便的配合 Git,比如有冲突时不会看得晕乎乎,使用鼠标点 ...

  4. Python学习系列（八）( 面向对象基础）

     Python学习系列(八)( 面向对象基础) Python学习系列(七)( 数据库编程) 一,面向对象 1,域:属于一个对象或类的变量.有两种类型,即实例变量—属于每个实例/类的对象:类变量—属于类 ...

  5. Fuel9.0安装openstack过程中所踩过的坑2018最新版

    坑一,安装好后,无法访问Web UI画面 访问https//10.20.0.2:8443无法打开UI画面.首先我们不管以后的步骤,打不开是很不爽的. 解决方法:把下面网卡1,网卡2,网卡3的界面名称都 ...

  6. socket编程 —— 非阻塞socket (转)---例子已上传至文件中

    在上一篇文章 <socket编程——一个简单的例子> http://blog.csdn.net/wind19/archive/2011/01/21/6156339.aspx 中写了一个简单 ...

  7. 关于2B的转义问题

    最近碰到了一个中文乱码问题,话说是这样的:模块A调模块B的1接口,B把A带过来的用户ID加密后返回一个链接,当用户点击该链接时,A解密该用户ID后再调B的2接口.简而言之,我们用流程看下:模块A -& ...

  8. zk中文乱码问题

    之前讲了怎么把数据导入到zookeeper(见zookeeper事件监听的importData方法),虽然本机win10的zookeeper展示没问题,但到了linux上就出现乱码了: << ...

  9. 笔记本设置wifi热点并抓包

    现在很多人喜欢蹭wifi热点,这里演示一下怎么利用笔记本设置wifi热点来钓鱼.本机是win10操作系统. 一.设置笔记wifi热点:右键点击右下角网络图标 -> 打开“网络和Internet设 ...

  10. MIT App Inventor使用与入门教程

    前言:随着信息技术新课标的提出,移动app应用设计被加入到新课标,程序与算法得到体现,学生的创造性,计算思维与信息意识也可以在其中得到体现. 安卓app开发目前比较火热的是Eclipse和Androi ...