css 實現換膚幾種方式

2022-08-11 01:33:14 字數 799 閱讀 1093

說起換膚功能,前端肯定不陌生,其實就是顏色值的更換,實現方式有很多,也各有優缺點

對於只提供幾種主題方案,讓使用者來選擇的,一般就簡單粗暴的寫多套主題

可以參看 element-ui 的換膚實現,就是先把樣式中顏色全部替換後在塞到標籤裡面

modifyvars方法是是基於 less 在瀏覽器中的編譯來實現。所以在引入less檔案的時候需要通過link方式引入,然後基於less.js中的方法來進行修改變數

// styles.less

@color: red;

.card

card

更改顏色

css 原生變數 相容性,大部分主流瀏覽器還是支援的,而且主要是操作起來夠簡便。

定義變數

// 加上字首 -- 就可以了 

:root

//使用 當--color 不生效的時候會使用後面引數替代

body:

使用 js 去修改

// 獲取根

let root = document.documentelement;

root.style.setproperty('--color', '#f00');

如果需要動態替換顏色主題,使用第二種比較合適也方便.如果每套主題有很大差異性不僅僅只是顏色的替換,第一種的方式就好了很多,使用第二種就不太合適了.如果都需要滿足也可以兩種相結合使用

css實現換膚功能

使用css的自定義屬性,和getcomputedstyle setproperty getpropertyvalue 來實現 css的自定義樣式 是css的變數宣告 root theme color f00 getcomputedstyle elem,偽 返回的是乙個該elem的所有屬性 自定義屬性...

Android APK方式換膚實現原理

這種方式就是把 打包成乙個apk,然後在主程式中訪問這個 apk中的資源。這種方式需要涉及到兩個應用之間的資料訪問了。那如何做到應用間的資料訪問呢?這就得用到android shareuserid這個屬性了。通過shared user id,擁有同乙個user id的多個apk可以配置成執行在同乙個...

css實現水平居中的幾種方式

編輯於 2018 05 13 text align center 複製 margin和width實現水平居中 常用 前提 已設定width值 margin left auto margin right auto 絕對定位和margin left 寬度值 2 實現水平居中 固定寬度塊級元素水平居中,通...