說起換膚功能,前端肯定不陌生,其實就是顏色值的更換,實現方式有很多,也各有優缺點
對於只提供幾種主題方案,讓使用者來選擇的,一般就簡單粗暴的寫多套主題
可以參看 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 實現水平居中 固定寬度塊級元素水平居中,通...