兩種讓使用者自定義專案主題色的方案

2021-09-12 19:29:56 字數 1742 閱讀 8277

cssstylesheet.insertrule(rule, index);
引數:

document.stylesheets[0].insertrule('.selector ', 0);
cssstylesheet.addrule(selector, csstext, index)
引數:

document.stylesheets[0].addrule('.selector', 'color: red', 0);
關於insertrule與addrule的區別

補充說明:雖說addrule是ie的方法,但是目前chrome等主流方法也都支援,可以放心的使用;而另一方面insertrule也支援ie9及以上。

可以讓我們像sass、less那樣建立變數;

:root

div.content

遺憾的是目前不支援ie,不過可以用js來判斷

varissupported =

window.css &&

window.css.supports &&

window.css.supports('--a', 0);

if (issupported) else

更多關於css3變數: 請點這裡

function settheme(color);

let len = document.stylesheets.length - 1;

//進行本地儲存

localstorage.setitem('theme', json.stringify(themedata));

document.stylesheets[len].addrule('.t-bg', `background-color: $ !important`);

document.stylesheets[len].addrule('.t-ft', `color: $ !important`);

document.stylesheets[len].addrule('.t-ft-h:hover', `color: $ !important`);

document.stylesheets[len].addrule('.t-bd', `border-color: $ !important`);

document.stylesheets[len].addrule('.t-sd', `box-shadow: 0 0 5px 1px $ !important`);

document.stylesheets[len].addrule('.t-sd-h:hover', `box-shadow: 0 0 5px 1px $ !important`);

document.stylesheets[len].addrule('.t-tsd-h:hover', `text-shadow: 0 0 5px $ !important`);

document.stylesheets[len].addrule('.t-tsd', `text-shadow: 0 0 5px $ !important`);

}

function settheme(color)

兩種讓使用者自定義專案主題色的方案

cssstylesheet.insertrule rule,index 引數 document.stylesheets 0 insertrule selector 0 cssstylesheet.addrule selector,csstext,index 引數 document.styleshee...

Android 兩種自定義的Menu

雖然兩種方法有很多相似的地方,但是使用的方法不同,廢話不多說,帖方法了 方法一功能簡述 要實現能代替系統選單的自定義選單必須保證以下基本功能的實現 能通過menu鍵隱藏顯示選單 截獲系統menu鍵動態隱藏顯示 當獲得焦點時高亮顯示獲得焦點的選單項 實現按下選單狀態效果 能設定選單背景 能設定選單項背...

自定義dialog的兩種方式

介紹自定義對話方塊 dialog 的兩種方式 方式一 首先自定義乙個自己想要設計的對話方塊的介面布局,我的是這樣的 然後在activity類中進行展示,這裡我寫了乙個showinputpwddialog方法 輸入密碼對話方塊 private void showinputpwddialog 方式二 可...