我们在浏览一些网站，尤其是一些小说网站的时候，都会有修改页面背景颜色的地方，这个功能使用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. UVA12716 GCD XOR 数论数学构造

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010682557/article/details/36204645 题目给你一个N,让你求 两个数 ...

  2. STMM32 ‘&’ 操作

    if(0x04 == (new_cfg&0x04)){ sys_cfg_msg.pps_cfg = ; cn_save_data[cn_save_index_stp].hash= ; sys_ ...

  3. elipse中开发servlet，直接run as 时出现404错误的解决方法

    在elipse中开发servlet时,无论在IDE中运行,还是在浏览器中访问servlet时,一直报404错误, 后发现在build目录中没有生成相应的类文件,后反复采用project中的clean. ...

  4. 1.Django入门小Demo

    1.Django安装 (1)前提:已安装python环境 (2)打开命令行输入:pip install Django==2.1.3 (3)打开Pycharm,在File--Setting--Proje ...

  5. MEF学习总结（2）---Primitive层

    Primitive层是属于依赖注入的通用模型,主要有如下核心类型: 1. ComposablePart是核心类,他表示组件容器中的每一个组件,是对真正组件实例的包装.ExportDefinition属 ...

  6. RK3288 HDMI配置和调试

    RK3288 最大输出分辨率为 3840x2160 HDMI 驱动代码位于 kernel/drivers/video/rockchip/hdmi/rockchip-hdmiv2 目录 1.设置默认输出 ...

  7. python接口自动化19-requests-toolbelt处理multipart/form-data

    requests-toolbelt 1.官方文档地址:requests-toolbelt官方文档 2.环境安装 pip install requests-toolbelt multipart/form ...

  8. 设计模式－访问者(Visitor)模式

    访问者模式是对象的行为模式.访问者模式的目的是封装施加在某种数据结构元素上的操作.一旦一些操作需要修改,接受这个操作的数据结构可以保持不变. 个人觉得访问者模式相对其他的设计模式来说稍微复杂,难理解一 ...

  9. 反向生成hibernate实体类和映射文件

    工欲善其事,必先利其器.我们可以使用IDE来根据数据库中的表反向生成实体类和映射文件,虽然这些东西手写也并不是难度很大,但是如果存在大量的简单工作需要我们做,也会显得很麻烦. 写在前面 我们反向生成的 ...

  10. Django学习---cookie和session

    cookie 客户端浏览器上的一个文件,以键值对的形式存储,如{“user”:“dacehgnzi”} 入门:实现一个简单的登录功能 views.py: user_info = { '}, '}, } ...