使用HTML CSS实现网页换肤效果（二）

前端技术 2023/09/08 CSS
 废话不多说了，直接给大家贴html代码了，具体代码如下所示：
XML/HTML Code复制内容到剪贴板
  1. <head>    
  2. <title>网页换肤</title>    
  3. <meta http-equiv=\"Content-Type\" content=\"text/html\" ; charset=\"UTF-8\">    
  4. <link id=\"myCss\" href=\"orange.css\" rel=\"stylesheet\">    
  5. <script language=\"javascript\">    
  6. //写入客户端Cookie    
  7. function writeCookie(csspath) {    
  8. var today = new Date();    
  9. var expires = new Date();    
  10. expires.setTime(today.getTime() + 1000 * 60 * 60 * 24 * 30); //有效期为30天    
  11. var str = \"cssPath=\" + csspath + \";expires=\" + expires.toGMTString()    
  12. + \";\";    
  13. document.cookie = str;    
  14. }    
  15. //读取Cookie    
  16. function readCookie(cookieName) {    
  17. var search = cookieName + \"=\";    
  18. if (document.cookie.length > 0) {    
  19. offset = document.cookie.indexOf(search);    
  20. if (offset != -1) {    
  21. offset += search.length;    
  22. end = document.cookie.indexOf(\";\", offset);    
  23. if (end == -1) {    
  24. end = document.cookie.length;    
  25. return unescape(document.cookie.substring(offset, end));    
  26. }    
  27. }    
  28. }    
  29. }    
  30. function ifCookie() {    
  31. if (readCookie(\"cssPath\") == undefined) {    
  32. writeCookie(\"orange.css\");    
  33. }    
  34. document.getElementById(\"myCss\").href = readCookie(\"cssPath\");    
  35. }    
  36. function change(type) {    
  37. if (type == \"orange\") {    
  38. document.getElementById(\"myCss\").href = \"orange.css\";    
  39. writeCookie(\"orange.css\");    
  40. }    
  41. if (type == \"gray\") {    
  42. document.getElementById(\"myCss\").href = \"gray.css\";    
  43. writeCookie(\"gray.css\");    
  44. }    
  45. }    
  46. </script>    
  47. </head>  

通过以上代码就可以简单实现使用HTML CSS实现网页换肤效果，希望本读代码对大家有所帮助。

本文地址：https://www.stayed.cn/item/21908

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案