換膚 更換主題

2022-04-11 15:02:42 字數 636 閱讀 8612

1.思路

動態插入 css 覆蓋之前樣式、編輯不同主題類動態載入/統一載入樣式檔案

2.實現方式

2.1 若是單頁、或者設計比較好的模板頁面,可以在 html 頂部前置乙個 js 檔案處理 不同主題 下將要用到的樣式檔案.

2.2 使用 onload 方法載入完畢執行後續**(配合共用 css 檔案效果更佳)、ajax 載入 css 檔案然後插入 style 標籤裝載接收到的 文字 ( 需要更改 css 檔案相對路徑 - 正則替換 )

3. 核心**

3.1 onload

var colorconfig=   

var theme = $.cookie("colorid") ? $.cookie("colorid") : 'green';

$('html').css('backgroundcolor',colorconfig[theme]);

if ($("#themecss").length

<

1) )

}window.onload=function()

view code

3.2 ajax

$.ajax(  

});

view code

Vue中如何使用sass實現換膚 更換主題 功能

原理 通過設定html的attribute屬性在封裝的函式中進行判斷,進行相應的設定不同的顏色 css中 可以識別到在html標籤上設定的屬性,所以在html上對應屬性發生變化時,就會執行相應的樣式,這一步有點類似於平時給div新增乙個.active屬性,css自動執行相應樣式。1.首先切換的樣式檔...

WPF DevExpress 更換主題

wpf中更換主題包含多種方式,這裡介紹兩種常用方式,方式一 在xaml中更換主題即使用預設主題,方式二 在軟體頁面中更換主題。方式一實現方法 在窗體屬性中新增主題屬性即可 dx thememanager.themename office2007blue 方式二實現方式 方式二實現想比較方式一複雜一點...

Notepad 更換主題

新版的notepad 都支援更換主題,方法很簡單 選單上的 設定 語言格式設定,就可以選擇不同的主題了。若是覺得這些主題不滿意,你還可以自己定製更多主題,使用的是textmate the missing editor for mac os x,這個裡面有很多漂亮的主題,不過格式是不一樣的,notep...