이 기사의 예에서는 JQuery가 적시에 글꼴 색상을 동적으로 변경하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다. JQuery는 적시에 글꼴 색상을 동적으로 변경합니다. Ajax의 효과는 텍스트 상자에 텍스트를 입력한 다음 색상 블록을 선택하면 입력된 텍스트가 색상으로 표시된 색상 값으로 변경됩니다. 블록..아주 좋은 효과입니다. 작업 중 오류가 있는 경우 페이지를 새로고침해주세요. 코드 복사 코드는 다음과 같습니다. JQuery动态改变字体颜color <br> h1 {<br> 글꼴:굵게 15px/19px 조지아, 세리프;<br> }<br> p {마진:0;}<br> #colorselections {<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> <script type="text/javascript" src="js/jquery1.3.2.js"></script><br> <script type="text/javascript"><br> $(함수(){<br> $("#inputText").keyup(함수(){<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("color",$(this).css("배경색"))<br> });<br> });<br> <br> </머리><br> <br> <h1>请输入文字</h1><br> <input type="text" id="inputText" value="" /><br> <h1>请选择颜color</h1><br> <p><br> <span id="colorselections"> <br> <a href="#" style="배경색:#000000;" class="on"><br> <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Black" /><br> <br> <a href="#" style="배경색:#003399;" class=""><br> <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="밝은 파란색" /><br> <br> <a href="#" style="배경색:#5E5E5E;" class=""><br> <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="미디엄 그레이" /><br> <br> <a href="#" style="배경색:#00524E;" class=""><br> <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="Dark Teal" /><br> <br> <a href="#" style="배경색:#258B86;" class=""><br> <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="밝은 청록색" /><br> <br> <a href="#" style="배경색:#DA7E33;" class=""><br> <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="주황색" /></a><br> <a href="#" style="배경색:#198541;" class=""><br> <img src="/jscss/demoimg/201006/space.gif" class="colorbox" alt="녹색" /><br> <br> <br> <br> <brclear="둘 다" /><br> <p id="previewer"></p><br> </본문><br> </div>
