Jquery change(fontsize,background) 改变颜色与背景的代码

更新时间：2010年05月13日 18:08:00 作者：

基于Jquery的改变颜色与背景的代码，对于学习jquery的朋友可以参考下。

change(fn)
在每一个匹配元素的change事件中绑定一个处理函数。
change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>豪情</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><style> p{line-height:23px;margin:0;padding:0;} </style> <script> $(function(){ $('#fontsize').change(function(){ var size = $('#fontsize').val(); $('p').css('font-size', size); }); $('#backgoundcolor').change(function(){ var bgc = $('#backgoundcolor').val(); $('p').css('background', bgc); }); $('#fontcolor').change(function(){ var fontcolor = $('#fontcolor').val(); $('p').css('color', fontcolor); }); }); </script></head> <body> <div> <label for="fontsize">字体大小</label> <select name="" id="fontsize"> <option value="12px">小号</option> <option value="14px">较小</option> <option value="16px" >中号</option> <option value="18px">较大</option> <option value="24px">大号</option> </select> <label for="backgoundcolor">背景颜色</label> <select name="" id="backgoundcolor"> <option value="#F4FBFF">默认</option> <option value="gray">淡灰</option> <option value="red">红色</option> <option value="green">绿色</option> <option value="yellow">明黄</option> </select> <label for="fontcolor">字体颜色</label> <select id="fontcolor"> <option value="#000">黑色</option> <option value="#f00">红色</option> <option value="#060">绿色</option> <option value="#00f">蓝色</option> <option value="#600">棕色</option> </select> <label> </div> <h4>春江花月夜</h4> <p>春江潮水连海平，海上明月共潮生。滟滟随波千万里，何处春江无月明。</p> <p>江流宛转绕芳甸，月照花林皆似霰。空里流霜不觉飞，汀上白沙看不见。</p> <p>江天一色无纤尘，皎皎空中孤月轮。江畔何人初见月？江月何年初照人？</p> <p>人生代代无穷已，江月年年只相似。不知江月待何人，但见长江送流水。</p> <p>白云一片去悠悠，青枫浦上不胜愁。谁家今夜扁舟子？何处相思明月楼？</p> <p>可怜楼上月徘徊，应照离人妆镜台。玉户帘中卷不去，捣衣砧上拂还来。</p> <p>此时相望不相闻，愿逐月华流照君。鸿雁长飞光不度，鱼龙潜跃水成文。</p> <p>昨夜闲潭梦落花，可怜春半不还家。江水流春去欲尽，江潭落月复西斜。</p> <p>斜月沉沉藏海雾，碣石潇湘无限路。不知乘月几人归，落月摇情满江树。</p> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript（基于jQuery）实现鼠标获取选中的文字示例【测试可用】
这篇文章主要介绍了javascript（基于jQuery）实现鼠标获取选中的文字,涉及jQuery响应鼠标事件及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2019-10-10
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
快速学习jQuery插件中的jquery.validate.js表单验证插件使用方法，Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到了许多Web开发者的好评，感兴趣的小伙伴们可以参考一下
2015-12-12
jquery和javascript中如何将一元素的内容赋给另一元素
将一元素的内容赋给另一元素，在某些情况下还是比较实用的，下面为大家讲解下jquery和javascript中是如何实现的
2014-01-01
jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载）
ImageDrawer.js是一款可以实现动态绘制图片动画的jQuery插件，接下来通过本文给大家介绍jQuery插件ImageDrawer.js实现动态绘制图片动画（附源码下载），需要的朋友参考下
2016-02-02
浅谈jQuery before和insertBefore的区别
下面小编就为大家带来一篇浅谈jQuery before和insertBefore的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-12-12
深入分析jQuery.one() 函数
这篇文章主要介绍了jQuery.one() 函数的用法，文中通过示例代码帮助大家更好的学习，感兴趣的朋友可以参考一下
2020-06-06
jQuery列表拖动排列具体实现
列表拖动排列的实现方法有很多，下文为大家介绍下使用jQuery是如何实现的，感兴趣的朋友不要错过
2013-11-11
基于jQuery的消息提示插件 DivAlert之旅（二）
今天在首页看到了一位仁兄用JS实现的模仿QQ校友弹出提示框效果的文章（文章链接），同道中人啊。。看起确实不错，看来我第一版的有点单纯了，咱也美化一下，就借鉴一下人家这两张图片吧
2010-04-04
移动端JQ插件hammer使用详解
本文给大家介绍的是一款移动端下的jQuery插件Hammer.js，他是一个开源的，轻量级的javascript库，它可以在不需要依赖其他东西的情况下识别触摸，鼠标事件支持各种手机事件，比如缩放，qq左滑动删除，放大，旋转等
2015-07-07
jQuery AjaxQueue改进步骤
之前用jquery实现了一个简单的AjaxQueue，用于管理ajax请求的发送顺序。这次改进了下。
2011-10-10

Jquery change(fontsize,background) 改变颜色与背景的代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具