本文實例講述了JQuery實作動態適時改變字體顏色的方法。分享給大家供大家參考。具體分析如下： JQuery動態適時改變字體的顏色，Ajax的效果類似，在文字方塊輸入文字，再選擇色塊，輸入的文字就會變成色塊標示的顏色值，很不錯的效果吧。如果運行有錯，請重新整理一次頁面即可。 複製程式碼 程式碼如下: JQuery動態改變字型顏色 <br /> h1 {<br /> 字體：粗體 15px/19px Georgia，襯線；<br /> }<br /> p {邊距：0;}<br /> #colorselections a {<br /> 邊框：2px實線#fff;<br /> 右距：4px;<br /> 顯示：塊；<br /> 浮動：左；<br /> }<br /> 一張圖片 {<br /> 邊框：1px實線#fff;<br /> 寬度：22px；<br /> 高度：22px；<br /> 垂直對齊：底部；<br /> }<br /> #colorselections{zoom:1} <br /> #colorselections a.on {<br /> 邊框：2px實心#d5680d;<br /> }<br /> #預覽器{<br /> 邊距：26px 0 20px 0;<br /> 內邊距：6px；<br /> 清除：左；<br /> 字體：粗體 19px/25px Verdana;<br /> 邊框：1px實心#ccc;<br /> 寬度：80%；<br /> }<br /> </風格><br /> <腳本類型=“text/javascript”src=“js/jquery1.3.2.js”></腳本><br /> <腳本類型=“text/javascript”><br /> $(函數(){<br /> $("#inputText").keyup(function(){<br /> $("#previewer").empty();<br /> $("#previewer").text($(this).attr("value"));<br /> });<br /> });<br /> $(函數(){<br /> $("#colorselections a").click(function(){<br /> $(this).addClass("on").siblings().removeClass("on");<br /> $("#previewer").css("顏色",$(this).css("背景顏色"))<br /> });<br /> });<br /> </腳本><br /> </頭><br /> <身體><br /> <h1>請輸入文字<br /> <input type="text" id="inputText" value="" /><br /> <h1>請選擇顏色<br /> <p><br /> <span id="顏色選擇"> <br /> <a href="#" style="background-color:#000000;"類別=「開」><br /> <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="JQuery實作動態適時改變字體顏色的方法_jquery" /><br /> <br /> <a href="#" style="background-color:#003399;"類別=“”><br /> <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="JQuery實作動態適時改變字體顏色的方法_jquery" /><br /> <br /> <a href="#" style="background-color:#5E5E5E;"類別=“”><br /> <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="JQuery實作動態適時改變字體顏色的方法_jquery" /><br /> <br /> <a href="#" style="background-color:#00524E;"類別=“”><br /> <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="JQuery實作動態適時改變字體顏色的方法_jquery" /><br /> <br /> <a href="#" style="background-color:#258B86;"類別=“”><br /> <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="JQuery實作動態適時改變字體顏色的方法_jquery" /><br /> <br /> <a href="#" style="background-color:#DA7E33;"類別=“”><br /> <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="JQuery實作動態適時改變字體顏色的方法_jquery" /><br /> <a href="#" style="background-color:#198541;"類別=“”><br /> <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="JQuery實作動態適時改變字體顏色的方法_jquery" /><br /> <br /> <br /> <br /> <brclear="兩者"/><br /> <p id="預覽器"><br /> </身體><br /> 希望本文對大家介紹的 jQuery 程式設計有所幫助。
