微信登录

css background

主题一键切换

  1. <!DOCTYPE html>
  2. <head>
  3.     <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  4.     <link rel="stylesheet" type="text/css" href="css/A.css" id="changecss">
  5.     <link rel="stylesheet" type="text/css" href="css/home.css">
  6. </head>
  7. <body>
  8.     <div>
  9.         <div class="sizee aaaa"></div>
  10.         <div class="sizee bbbb"></div>
  11.         <div class="sizee cccc"></div>
  12.         <button id="bu1">A</button>
  13.         <button id="bu2">B</button>
  14.     </div>
  15. </body>
  17. <script>
  18.     $("#bu1").click(function(){
  19.         filename = "A"
  20.         $("#changecss").attr("href","css/"+ filename +".css")
  21.     })
  22.     $("#bu2").click(function(){
  23.         filename = "B"
  24.         $("#changecss").attr("href","css/"+ filename +".css")
  25.     })
  26. </script>
  28. <style>
  29. .sizee{
  30.     width: 100px;
  31.     height: 100px;
  32. }
  33. </style>

A主题

  1. /* 全局变量 */
  2. :root{
  3.     --AAA:#ff00ff;
  4.     --BBB:#ff00ff9b;
  5.     --CCC:#f700ff4b;
  6. }

B主题

  1. :root{
  2.     --AAA:#0400ff;
  3.     --BBB:#0011ff9b;
  4.     --CCC:#002fff4b;
  5. }

直接使用全局变量

  1. .aaaa{
  2.     background-color: var(--AAA);
  3. }
  4. .bbbb{
  5.     background-color: var(--BBB);
  6. }
  7. .cccc{
  8.     background-color: var(--CCC);
  9. }
css background