我们在浏览一些站点，尤其是一些小说站点的时候，都会有改动页面背景颜色的地方，这个功能使用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. 使用before_request来做权限和用户检查

    因为使用restful方式,因此每次用户访问都会上传带入auth_key,如jwt等,因此可在@app.before_request中做权限的检查. @app.app.before_request d ...

  2. .net MVC 登陆模块后台代码

    首先是拦截器 public class AuthLoginAttribute : ActionFilterAttribute { public bool IsLogin = true; /// < ...

  3. SpringMVC的@RequestMapping和Controller方法返回值

    本节内容: @RequestMapping Controller方法返回值 一.@RequestMapping 通过@RequestMapping注解可以定义不同的处理器映射规则. 1. URL路径映 ...

  4. 一步一步学习IdentityServer3 (4)

    其实上述例子 很多都很找到 但是在实际生态环境中给例子有很多不一样的地方 比如自定已登录界面怎么做? 怎么访问自己的用户数据库实现登录? 怎么在接口中使用,在接口中又怎么实现与Idr3结合授权? 等等 ...

  5. js中call与apply用法

    call和apply,它们的作用都是将函数绑定到另外一个对象上去运行 两者的格式和参数定义: call( thisArg [,arg1,arg2,… ] ); // 参数列表,arg1,arg2,.. ...

  6. Docker 简介与shell操作使用

    一.Docker概述 1.Docker简介        Docker是一个开源的应用容器引擎:是一个轻量级容器技术:Docker支持将软件编译成一个镜像:然后在镜像中各种软件做好配置,将镜像发布出去 ...

  7. ResultCode 自定义错误状态码

    public class ResultCode { // 成功状态码 public static final int SUCCESS = 1; // -------------------失败状态码- ...

  8. MongoDB 安全配置

    前言 随着MongoDB使用人群企业越来越广泛,黑客的注意力也转移到了其中.比如去年很火热的MongoDB劫持事件,很多人对MongoDB的安全也越来越重视.今天,我们就简单总结一些MongoDB的安 ...

  9. homestead实现外部局域网络其他主机的访问

    转载自:https://blog.csdn.net/u013659696/article/details/78455362 homestead 2.0 MAC环境 修改Homestead目录下的Vag ...

  10. php 会话控制（Session会话控制）

    php的session会话是通过唯一的会话ID来驱动的,会话ID是一个加密的随机数字,由php生成,在会话的生命周期中都会保存在客户端.客户端保存数据的地方只有cookie,所以php的会话ID一般保 ...