自学内容网 自学内容网

js 实现换肤

js换肤

可以通过js来实现网页换肤效果的两种方案,很简单。
展示~

简单换肤: 普通的CSS样式更换即可实现

方案1:js动态的link对应的皮肤样式

过编译工具与构建工具编译出多套皮肤css,通过js动态的link对应的皮肤样式

// js动态处理
var theme = /\bt=(\w+)/.exec(location.search);
theme = theme ? theme[1] : "light";

changeTheme(theme);

function changeTheme(theme) {
    var head = document.getElementsByTagName("head")[0];
    var link = document.createElement("link");
    link.dataset.type = "theme";
    link.href = "assets/css/theme-" + theme + "/pages/home/home.css";
    link.rel = "stylesheet";
    link.type = "text/css";
    head.appendChild(link);
}

方案2:借助插件

需要借助sass和一些插件不建议做
https://mp.weixin.qq.com/s/cecXgj5vClDYmGunJmGEag

大吉大利,终于不用写代码了。爽爽爽!!!


原文地址:https://blog.csdn.net/genius_yym/article/details/142454913

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!