最近專案要實作換膚效果，我用了一個笨方法去實作。。。我的思路分三步
首先在外部的index.html中引入整個專案的主題樣式檔案
<link rel="stylesheet" id="style" href="https://bbs.csdn.net/topics/static/css/theme.css">
然后，在app.vue檔案下的生命周期鉤子函式里，放了一個這個
created() {
var style = localStorage.getItem("style");
if(style){
$("#style").attr("href",style); //實作將主題保存在記憶體中重繪瀏覽器不改變
}
}
實作在頁面初始化的時候判斷在本地localstorage里的style樣式，進行渲染
接下來，就只需要在頁面上放置一個按鈕，按鈕上有一個觸發事件，傳入引數，然后渲染你寫好的不同樣式的css，就實作換膚效果了
Change(e){
if(e == 1){
$("#style").attr("href","../static/css/themefire.css");
localStorage.setItem("style","../static/css/themefire.css");
}else if(e == 2){
$("#style").attr("href","../static/css/themefreeze.css");
localStorage.setItem("style","../static/css/themefreeze.css");
}
....//這里如果你要有更多的樣式選擇，就放這里
}
我還有一個思路就是，用ajax請求后臺判斷當前的主題，然后再用js去渲染。但是我實作之后發現如果用戶的網路狀態不好，樣式就會閃動。。。
和我一起做專案的大神說這樣子處理不太好，但是大神很高冷，沒有告訴我他的思路。。不知道小伙伴們有沒有更好的idea？
uj5u.com熱心網友回復：
切換css，比如 https://revealjs.com/#/themes切換class來用不同的css selector，比如 https://codepen.io/MoYummy/pen/ERJrZO
uj5u.com熱心網友回復：
https://segmentfault.com/a/1190000009762198#articleHeader2uj5u.com熱心網友回復：
樓主 請問一下我這個，也是這么做的，切換后 css不生效是為什么uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/57212.html
標籤：其他技術討論專區
上一篇：RF自動化測驗，斷言問題
下一篇：求助穿越機大佬