全局变量 - root{} - 主题一键切换
主题一键切换
<!DOCTYPE html><head> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <link rel="stylesheet" type="text/css" href="css/A.css" id="changecss"> <link rel="stylesheet" type="text/css" href="css/home.css"></head><body> <div> <div class="sizee aaaa"></div> <div class="sizee bbbb"></div> <div class="sizee cccc"></div> <button id="bu1">A</button> <button id="bu2">B</button> </div></body><script> $("#bu1").click(function(){ filename = "A" $("#changecss").attr("href","css/"+ filename +".css") }) $("#bu2").click(function(){ filename = "B" $("#changecss").attr("href","css/"+ filename +".css") })</script><style>.sizee{ width: 100px; height: 100px;}</style>
A主题
/* 全局变量 */:root{ --AAA:#ff00ff; --BBB:#ff00ff9b; --CCC:#f700ff4b;}
B主题
:root{ --AAA:#0400ff; --BBB:#0011ff9b; --CCC:#002fff4b;}
直接使用全局变量
.aaaa{ background-color: var(--AAA);}.bbbb{ background-color: var(--BBB);}.cccc{ background-color: var(--CCC);}
