jquery 实现的改变颜色与背景的代码 change(fontsize,background)补充2-Web前端之家

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><link rel="dns-prefetch" href="//www.jiangweishan.com"><link rel="dns-prefetch" href="//jiangweishan.comsearch.php"><link rel="dns-prefetch" href="//pagead2.googlesyndication.com"><link rel="dns-prefetch" href="//www.web176.com"><link rel="dns-prefetch" href="//shang.qq.com"><link rel="dns-prefetch" href="//www.w3.org"><link rel="dns-prefetch" href="//ajax.googleapis.com"><link rel="dns-prefetch" href="//www.jb51.net"><link rel="dns-prefetch" href="//files.jb51.net"><link rel="dns-prefetch" href="//www.mockplus.cn"><link rel="dns-prefetch" href="//www.aliyun.com"><link rel="dns-prefetch" href="//weibo.com"><link rel="dns-prefetch" href="//beian.miit.gov.cn"><link rel="dns-prefetch" href="//hm.baidu.com"><link rel="dns-prefetch" href="//www.zblogcn.com"><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(){ $('#c-obj select').change(function(){ alert($(this).attr('id') + ': ' + $(this).val()); $('p').css($(this).attr('id'), $(this).val()); //select的ID和要设置的CSS属性值必须保持一致 }); }); </script></head><body><h4>change(fn)</h4><h4>在每一个匹配元素的change事件中绑定一个处理函数。</h4><h4>change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发。</h4><div id="c-obj"><label for="font-size">字体大小</label><select name="" id="font-size"><option value="12px">小号 <option value="14px">较小 <option value="16px">中号 <option value="18px">较大 <option value="24px">大号 </select><label for="background">背景颜色</label><select name="" id="background"><option value="#F4FBFF">默认 <option value="gray">淡灰 <option value="red">红色 <option value="green">绿色 <option value="yellow">明黄 </select><label for="color">字体颜色</label><select id="color"><option value="#000">黑色 <option value="#f00">红色 <option value="#060">绿色 <option value="#00f">蓝色 <option value="#600">棕色 </select><label></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需刷新才能执行]

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