我们在浏览一些站点,尤其是一些小说站点的时候,都会有改动页面背景颜色的地方,这个功能使用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. django中的view测试和models测试样例

    感觉用model_mommy比factory_boy要好些. 如果Models.py如下: from django.db import models from django.contrib.auth. ...

  2. oracle用户名小写时,利用sqlplus连接

    [oracle@upright92 ~]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on Tue May 22 10:3 ...

  3. ubuntu ifconfig只有lo没有ens33的问题

    如果ifconfig只显示了lo, ifconfig -a 却正常显示ens33.那么可以按照如下的操作: service network-manager stop rm /var/lib/Netwo ...

  4. 【noip模拟赛1】古韵之同心锁

    据说在一座OI桥上,同心锁上显示的文字有着它奇异的呈现方式,需要你把它稍做改变才可解密.每个同心锁上都有3个数据.第一个数据是一个字符串s.第二个数据m表示把s串从m处分为两段,s[1]至s[m-1] ...

  5. 反射调用 java bean的set和get方法

    一.使用java.beans.PropertyDescriptor import java.beans.IntrospectionException; import java.beans.Proper ...

  6. 浅析Entity FrameWork性能优化

    浅析EF性能优化 1.       数据Load 延迟加载:当实体第一次读取时,相关数据没有加载:当第一次试图访问导航属性时,所需的导航数据自动加载,EF默认使用这种方式加载数据,尽量使用预先加载和显 ...

  7. 安装redis出现的问题

    这个问题是我在腾讯云上安装redis时出现的错误, 1.在执行make命令时出现的错误 解决方案,没有安装gcc 什么是gcc: GCC是一个用于linux系统下编程的编译器是一个用于编程开发的自由编 ...

  8. 减少Building 'Xxx' Gradle project info等待时间

    转载请注明出处:http://www.cnblogs.com/cnwutianhao/p/6640279.html 从Github上看到好的Demo想要Download下来学习.导入到Android ...

  9. KVM和QEMU简介

    KVM/QEMU简介 KVM虚拟机是基于linux内核虚拟化,自linux2.6.20之后就集成在linux的各个主要发行版本中.它使用linux自身的调度器进行管理,所以相对于xen,其核心源码很少 ...

  10. 【BZOJ-3672】购票 树分治 + 斜率优化DP

    3672: [Noi2014]购票 Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 1177  Solved: 562[Submit][Status][ ...