我们在浏览一些站点，尤其是一些小说站点的时候，都会有改动页面背景颜色的地方，这个功能使用jquery非常easy实现。

效果图：

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

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

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

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

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

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

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

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

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

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

  5. jquery animate 改变元素背景颜色

    通过animate不能直接设置css样式可以通过https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.j ...

  6. JavaScript实现网页背景自动变色

    JavaScript实现网页背景自动变色,自己变换颜色,设定时间和颜色值即可,在你设定的颜色值.一定时间内自动切换网页背景颜色. <!DOCTYPE HTML PUBLIC "-//W ...

  7. JavaScript实例技巧精选(14)—动态变化背景颜色

    >>点击这里下载完整html源码<< 这是截图: 网页背景颜色随时间变化,核心代码如下: <SCRIPT LANGUAGE="JavaScript"& ...

  8. jquery动态改变背景颜色插件

    GETHUB下载地址 背景颜色用animate方法时时无法改变颜色的 所以要使用插件进行补充. 用法: <!DOCTYPE html> <html> <head> ...

  9. android:改动PagerTabStrip中的背景颜色，标题字体的样式、颜色和图标以及指示条的颜色

    1.改动PagerTabStrip中的背景颜色 我们在布局中直接设置background属性就可以: <android.support.v4.view.ViewPager android:id= ...

随机推荐

  1. Vuejs 高仿饿了么外卖APP 百度云视频教程下载

    Vuejs 高仿饿了么外卖APP 百度云视频教程下载 链接:https://pan.baidu.com/s/1KPbKog0qJqXI-2ztQ19o7w 提取码: 关注公众号[GitHubCN]回复 ...

  2. 【AtCoder】ARC103

    C - //// 为了防止一些多余的判断,我选择直接记录每个数的个数,然后枚举第一个数,找第一个数之外第二个数改变最少的情况下应该选什么 代码 #include <bits/stdc++.h&g ...

  3. spark优化之临时目录

    官方是这样说的: Directory to use for "scratch" space in Spark, including map output files and RDD ...

  4. Harbor 企业级镜像仓库搭建

    Habor是由VMWare公司开源的容器镜像仓库.事实上,Habor是在Docker Registry上进行了相应的 企业级扩展,从而获得了更加广泛的应用,这些新的企业级特性包括:管理用户界面,基于角 ...

  5. linux系统入门一些常用命令解析

    接触IT行业的时候,就使用了ubuntu系统做开发,那个时候是一头雾水,从习惯了window下的界面操作,到终端下的命令行操作,着实一开始让人很不习惯.但是没办法,那个时候公司每个人都用Ubuntu系 ...

  6. Prettier来统一代码风格

    prettier是一款解决代码风格问题的代码格式化工具,功能强大,简单易用,支持多语言,减少配置项. 前端开发过程中每个人写JavaScript的代码风格都不一样,又不能说别人写的代码有问题,这都是习 ...

  7. JdbcTemplate使用小结

    org.springframework.jdbc.core.JdbcTemplate.query(String sql, Object[] args, RowMapper<StaffUnionV ...

  8. rabbitmq学习（四） —— 发布订阅

    为了说明这种模式,我们将建立一个简单的日志系统.这个系统将由两个程序组成,第一个将发出日志消息,第二个将接收并处理日志消息.在我们的日志系统中,每一个运行的接收程序的副本都会收到日志消息. 交换器(E ...

  9. jQuery漏掉的东西

    prop和attr的区别 attr一般都用来设置和操作元素的自定义属性的,而prop一般都是操作元素的内置属性的(尤其是表单元素的操作我们大部分都在使用prop) each 可以遍历jQuery集合中 ...

  10. greenDao 介绍

    greenDAO是一个针对Android的轻快速ORM解决方案,它将对象映射到SQLite数据库.http://greenrobot.org/greendao/ greenDAO is a light ...