JavaScript 動態插入 CSS

2021-09-08 14:59:32 字數 1938 閱讀 9357

寫元件時有時想把一些元件特性相關的 css 樣式封裝在 js 裡,這樣更內聚,改起來方便。js 動態插入 css 兩個步驟就可以

建立乙個 style 物件

使用 stylesheet 的 insertrule 或 addrule 方法新增樣式

先看下 document.stylesheets,隨意開啟乙個頁面

其中前三個是通過 link 標籤引入的 css 檔案,第四個是通過 style 標籤內聯在頁面裡的 css。有如下屬性

每乙個 cssrule 又有如下屬性

其中的 csstext 正是寫在 style 的原始碼。

首先,需要建立乙個 style 物件,返回其 stylesheet 物件

/*

* 建立乙個 style, 返回其 stylesheet 物件

* 注意:ie6/7/8中使用 style.stylesheet,其它瀏覽器 style.sheet

*/function createstylesheet()

新增函式 addcssrule 如下

/*

* 動態新增 css 樣式

* @param selector 選擇器

* @param rules css樣式規則

* @param index 插入規則的位置, 靠後的規則會覆蓋靠前的

*/function addcssrule(selector, rules, index) ", index);

} else if (sheet.addrule)

}

需要注意,標準瀏覽器支援insertrule, ie低版本則支援addrule

完整**如下

/*

* 動態新增 css 樣式

* @param selector 選擇器

* @param rules css樣式規則

* @param index 插入規則的位置, 靠後的規則會覆蓋靠前的

*/var addcssrule = function()

// 建立 stylesheet 物件

var sheet = createstylesheet();

// 返回介面函式

return function(selector, rules, index) ", index);

} else if (sheet.addrule)

}}();

如果只支援移動端或現代瀏覽器,可以去掉低版本ie判斷的**

/*

* 動態新增 css 樣式

* @param selector 選擇器

* @param rules css樣式規則

* @param index 插入規則的位置, 靠後的規則會覆蓋靠前的,預設在後面插入

*/var addcssrule = function()

// 建立 stylesheet 物件

var sheet = createstylesheet();

// 返回介面函式

return function(selector, rules, index) ", index);

}}();

相關:

JavaScript動態載入

在做專案的過程中需要用到動態載入,如何做,剛開始很為難。什麼是動態載入呢?比如說,新增便簽時,在往庫里插入資料的同時需要顯示在介面上,新增資料後重新整理頁面是可以獲得,但是沒插入一條資料都要重新整理介面的話,不僅麻煩,還很慢。所以就需要用到動態載入。經過不懈努力,其實,也就是動態拼接字串而已。再新增...

javascript的動態this與動態繫結

乙個簡單的例子 1.window.name window 2.varrun function 5.run window.name window var run function run 執行 這裡你不能說run是作為window的乙個屬性而存在,但它的確是被window屬性呼叫了。實質上大多數暴露在...

mysql 動態插入 MySql條件插入動態值

所以在我解釋我的問題之前,這裡有一些 定義,以幫助說明我的問題 holds data about different memberships create table if not exists member types id int unsigned not null auto increment...