專案背景: 由於專案要求,需要前端對不同的企業使用者展示不一樣的顏色,也就是簡單的更改膚色.本來使用前端框架會很容易解決,但是公司目前的架構不是很好,前後端分離也沒有那麼徹底,web工程還是搭配jsp,沒辦法,只好用最純粹的css來實現換膚要求了.
最開始沒怎麼想,決定使用最簡單的方法,根據不同的顏色方案載入不同的css
rel=
"stylesheet"
href="
" id
="customertheme"
>
>
//根據不同的企業使用者載入不同的css
document.
queryselector
('#customertheme').
setattribute
('href'
,'./theme1.css'
)script
>
第二種方法是和同事**的時候,同事說偶然看谷歌頁面時發現的.
rel=
"stylesheet"
href="
" id
="customertheme"
>
rel=
"stylesheet"
href
="./theme.css"
>
>
//根據不同的企業使用者載入不同的css
document.
queryselector
('#customertheme').
setattribute
('href'
,'./root_theme1.css'
)script
>
/* root_theme1.css */
:root
/* theme.css */
.theme
其實就是方案二,我們在html head裡面加上乙個style
"theme"
>
style
>
document.
queryselect
('#theme'
).innerhtml=
`:root
;}`
換膚功能的實現
記得大概兩年前做過一款應用，涉及的主題 的更換，並不是單純的只換背景顏色，導航欄顏色，很類似於qq裡面的 更換，而是需要更換整個應用的80 還有包括一部分的字型.講完ui布局之後開始設計 2.分頁面設計，儘量減少常駐記憶體的ui，實際上，只有那3個主介面時常駐的，其他的ui都不是常駐。這樣在頁面被開...
WPF 實現換膚功能
將所有控制項的基本樣式匯集到乙個資源字典中，構成介面的基本樣式檔案，然後進行不同顏色 的定製。即在新的 資源字典檔案中引入基本樣式檔案，然後使用資源繼承，並且只設定控制項的顏色屬性等，形成乙個 檔案。注意 在設定不同 檔案時，不同控制項的樣式名字必須固定，只改變其顏色就能形成新的 因為在介面xaml...
css實現換膚功能
使用css的自定義屬性，和getcomputedstyle setproperty getpropertyvalue 來實現 css的自定義樣式 是css的變數宣告 root theme color f00 getcomputedstyle elem，偽 返回的是乙個該elem的所有屬性 自定義屬性...