又遇到顏色主題變化，這次使用了jquery+css，使用了函數傳值，而不是之前網站換膚改變link的方法。
首先是設置好顏色主題后，點擊改變頁面顏色主題。（需要自行導入jquery.js后查看效果）
直接貼代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/JavaScript" src="js/jquery.js"></script> </head> <style> div section{ width: 30px; height: 30px; margin: 10px; display: inline-block; } div section:nth-of-type(1){ background-color: #177cb0; } div section:nth-of-type(2){ background-color: #db5a6b; } div section:nth-of-type(3){ background-color: #008000; } div section:hover{ cursor:pointer; } </style> <body> <div> <section onclick="blue()"></section> <section onclick="red()"></section> <section onclick="green()"></section> </div> <center> <h2 style="display:inline-block;">顏色主題jquery變換</h2> <form action="" id="simpleCalc"> <span>input：</span><input type="text" required><br><br> <button id="calc">確認</button> </form> <span id="result"></span> </center> <script> //設置默認顏色主題 $(document).ready(function(){ blue(); }); // 點擊單個換色 function blue(){ change("#177cb0"); } function red(){ change("#db5a6b"); } function green(){ change("#008000"); } //設置需要改變顏色的元素及其樣式 function change(colo){ $("#calc").css("background-color", colo); $("h2, span").css("color", colo); $("input").css("color", colo); $("input[type=text]").focus(function(){$(this).css("outline", "none")}); $("input[type=text]").focus(function(){$(this).css("border", "2px solid " + colo)}); $("input[type=text]").blur(function(){$(this).css("border", "1px solid gray")}); } </script> </body> </html>
下一篇貼即時變化顏色主題（通過input輸入顏色值進行改變）的代碼。
如有錯誤，請您指正！