jQuery實現調節字體大小案例
本文實例為大傢分享瞭jQuery實現調節字體大小的具體代碼,供大傢參考,具體內容如下
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>設置字體</title> </head> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(function() { $("span").click(function() { var cssFontSize = $("#para").css("font-size"); //獲取字體大小 var fontSize = parseFloat(cssFontSize); //獲取字體大小的值 var unit = cssFontSize.slice(-2); //獲取字體大小的單位 var className = $(this).attr("class"); if ("zoomIn" == className) { //放大字體 if (fontSize <= 22) { fontSize += 2; } } else if ("zoomOut" == className) { //縮小字體 if (fontSize >= 12) { fontSize -= 2; } } $("#para").css("font-size", fontSize + unit); }); }); </script> <!-- CSS --> <style type="text/css"> .zoomIn, .zoomOut { background: blue; cursor: pointer; } </style> </head> <!-- HTML --> <body> <div class="msg"> <div class="msg_caption"> <span class="zoomIn">放大</span> <span class="zoomOut">縮小</span> </div> <div> <p id="para"> jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後又一個優秀的JavaScript代碼庫(框架)於2006年1月由John Resig發佈。<br /> jQuery設計的宗旨是“write Less,Do More”,即倡導寫更少的代碼,做更多的事情。<br /> 它封裝JavaScript常用的功能代碼,提供一種簡便的JavaScript設計模式,優化HTML文檔操作、事件處理、動畫設計和Ajax交互。<br /> jQuery的核心特性可以總結為:具有獨特的鏈式語法和短小清晰的多功能接口;具有高效靈活的CSS選擇器,並且可對CSS選擇器進行擴展;<br /> 擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等 </p> </div> </div> </body> </html>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。