本文實例講述了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 程式設計有所幫助。