Jquery change(fontsize,background) 改變顏色與背景的代碼

更新時(shí)間：2010年05月13日 18:08:00 作者：

基于Jquery的改變顏色與背景的代碼，對(duì)于學(xué)習(xí)jquery的朋友可以參考下。

change(fn)
在每一個(gè)匹配元素的change事件中綁定一個(gè)處理函數(shù)。
change事件會(huì)在元素失去焦點(diǎn)的時(shí)候觸發(fā)，也會(huì)當(dāng)其值在獲得焦點(diǎn)后改變時(shí)觸發(fā)。

<!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">小號(hào)</option> <option value="14px">較小</option> <option value="16px" >中號(hào)</option> <option value="18px">較大</option> <option value="24px">大號(hào)</option> </select> <label for="backgoundcolor">背景顏色</label> <select name="" id="backgoundcolor"> <option value="#F4FBFF">默認(rèn)</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">藍(lán)色</option> <option value="#600">棕色</option> </select> <label> </div> <h4>春江花月夜</h4> <p>春江潮水連海平，海上明月共潮生。滟滟隨波千萬(wàn)里，何處春江無(wú)月明。</p> <p>江流宛轉(zhuǎn)繞芳甸，月照花林皆似霰?？绽锪魉挥X(jué)飛，汀上白沙看不見(jiàn)。</p> <p>江天一色無(wú)纖塵，皎皎空中孤月輪。江畔何人初見(jiàn)月？江月何年初照人？</p> <p>人生代代無(wú)窮已，江月年年只相似。不知江月待何人，但見(jiàn)長(zhǎng)江送流水。</p> <p>白云一片去悠悠，青楓浦上不勝愁。誰(shuí)家今夜扁舟子？何處相思明月樓？</p> <p>可憐樓上月徘徊，應(yīng)照離人妝鏡臺(tái)。玉戶簾中卷不去，搗衣砧上拂還來(lái)。</p> <p>此時(shí)相望不相聞，愿逐月華流照君。鴻雁長(zhǎng)飛光不度，魚(yú)龍潛躍水成文。</p> <p>昨夜閑潭夢(mèng)落花，可憐春半不還家。江水流春去欲盡，江潭落月復(fù)西斜。</p> <p>斜月沉沉藏海霧，碣石瀟湘無(wú)限路。不知乘月幾人歸，落月?lián)u情滿江樹(shù)。</p> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: