img

js修改全站主题颜色

2021-04-21 0条评论 2.7k次阅读 JavaScript


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
}

💬 COMMENT


🦄 支持markdown语法

👋友