我们在浏览一些站点，尤其是一些小说站点的时候，都会有改动页面背景颜色的地方，这个功能使用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. Java编程的逻辑 (65) - 线程的基本概念

    ​本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...

  2. IntelliJ IDEA快捷键：F12

    The F12 key moves the focus from the editor to the last focused tool window. 将焦点从编辑器移动到最后一个聚焦的工具窗口.

  3. HTML布局思路

    1.DIV+CSS布局 (1)按照由上到下,由里到外的方式 (2)样式由CSS去改变 代码: <style type="text/css"> * { margin:0p ...

  4. 【LOJ】#2084. 「NOI2016」网格

    题解 之前用的mapTLE了,今天用了个hash把题卡了过去,AC数++ 我们只要保留一个点为中心周围5 * 5个格子就可以 如果一个点周围5*5个格子有两个不连通,那么显然输出0 如果一个出现了一个 ...

  5. HttpRequest中常见的四种Content-Type（转）

    add by zhj: Content-Type用于说明request body的编码格式的,对于没有request body的http method如GET,HEAD没有必要设置这个参数,当然,你设 ...

  6. Java反射初探 ——“当类也学会照镜子”

    反射的作用 开门见山地说说反射的作用   1.为我们提供了全面的分析类信息的能力 2.动态加载类   我理解的“反射”的意义 (仅个人理解哈)   我理解的java反射机制就是: 提供一套完善而强大的 ...

  7. Qt编译好的oracle驱动下载

    在上文,我累赘了一大堆,给大家写了一篇Qt如何编译OCI驱动,在这里自然就不再累赘了,直接附上编译好的文件供大家下载: <Qt5.3.1+OCI驱动下载地址> 有经济来源的请传送:http ...

  8. SpringMVC框架02——SpringMVC的Controller详解

    1.基于注解的控制器 1.1.@Controller 注解类型 在SpringMVC中使用org.springframework.stereotype.Controller注解类型声明某类的实例是一个 ...

  9. 3种纯css方法控制元素隐藏显示

    1.通过hover,也是最常用的方式.此方法要求按钮与被控制元素必须有层级关系.(兼容低端浏览器常用) <div class="nav-btn"> <h2> ...

  10. rsync基础

    参考资料:骏马金龙的rsync系列.该博主的博文质量很好,推荐大家关注. 环境 操作系统:CentOS Linux release 7.5.1804 (Core) 软件:rsync  version ...