js修改全站主题颜色
Sonder
2021-04-21
1393字
3分钟
浏览 (3.2k)
js修改全站主题颜色，大概方法就是点击一个主题颜色的时候，存一个css文件在本地，然后去取就好了。
废话不多说，直接上代码！
html
定义一个点击按钮【skin-changer】，其中【rel】里面的css里面必须存在且真实
<ul class="colorpicker" id="skin-changer">
<li><a class="colorpick-btn" title="blue" href="#" style="background-color:#5DB2FF;" rel="__AD__/css/skins/blue.min.css"></a></li>
<li><a class="colorpick-btn" title="azure" href="#" style="background-color:#2dc3e8;" rel="__AD__/css/skins/azure.min.css"></a></li>
</ul>js 点击事件
使用了JQ，获取到值后重新刷新页面
$("#skin-changer li a").click(function () {
createCookie("current-skin", $(this).attr("rel"), 10);
window.location.reload()
});向页面head添加css文件
var a;
readCookie("current-skin") && (a = document.createElement("link"), a.href = readCookie("current-skin"), a.rel = "stylesheet", document.getElementsByTagName("head")[0].appendChild(a));function createCookie(n, t, i) {
var r, u;
i ? (r = new Date, r.setTime(r.getTime() + i * 864e5), u = "; expires=" + r.toGMTString()) : u = "";
document.cookie = n + "=" + t + u + "; path=/"
}
function readCookie(n) {
for (var t, r = n + "=", u = document.cookie.split(";"), i = 0; i < u.length; i++) {
for (t = u[i]; t.charAt(0) == " ";) t = t.substring(1, t.length);
if (t.indexOf(r) == 0) return t.substring(r.length, t.length)
}
return null
}