JavaScript動態插入CSS的方法_javascript技巧

寫組件時有時想把一些組件特性相關的 CSS 樣式封裝在 JS 裡，這樣更內聚，改起來方便。JS 動態插入 CSS 兩個步驟:建立1、一個 style 對象
2、使用 stylesheet 的 insertRule 或 addRule 方法添加樣式

一、查看樣式表

先看下 document.styleSheets，隨意開啟一個頁面

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

 每一個 cssRule 又有如下屬性

其中的 cssText 正是寫在 style 的源碼。 

二、動態插入 CSS
首先，需要建立一個 style 對象，返回其 stylesheet 對象

/* * 建立一個 style， 返回其 stylesheet 對象 * 注意：IE6/7/8中使用 style.stylesheet，其它瀏覽器 style.sheet */function createStyleSheet() { var head = document.head || document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css'; head.appendChild(style); return style.sheet ||style.styleSheet;}

添加函數 addCssRule 如下

/* * 動態添加 CSS 樣式 * @param selector {string} 選取器 * @param rules {string} CSS樣式規則 * @param index {number} 插入規則的位置, 靠後的規則會覆蓋靠前的 */function addCssRule(selector, rules, index) { index = index || 0; if (sheet.insertRule) {   sheet.insertRule(selector + "{" + rules + "}", index);  } else if (sheet.addRule) {   sheet.addRule(selector, rules, index);  }}

需要注意，標準瀏覽器支援 insertRule， IE低版本則支援 addRule。
完整代碼如下

/* * 動態添加 CSS 樣式 * @param selector {string} 選取器 * @param rules {string} CSS樣式規則 * @param index {number} 插入規則的位置, 靠後的規則會覆蓋靠前的 */var addCssRule = function() { // 建立一個 style， 返回其 stylesheet 對象 // 注意：IE6/7/8中使用 style.stylesheet，其它瀏覽器 style.sheet function createStyleSheet() {  var head = document.head || document.getElementsByTagName('head')[0];  var style = document.createElement('style');  style.type = 'text/css';  head.appendChild(style);  return style.sheet ||style.styleSheet; }  // 建立 stylesheet 對象 var sheet = createStyleSheet();  // 返回介面函數 return function(selector, rules, index) {  index = index || 0;  if (sheet.insertRule) {    sheet.insertRule(selector + "{" + rules + "}", index);   } else if (sheet.addRule) {    sheet.addRule(selector, rules, index);   } }}();

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

/* * 動態添加 CSS 樣式 * @param selector {string} 選取器 * @param rules {string} CSS樣式規則 * @param index {number} 插入規則的位置, 靠後的規則會覆蓋靠前的，預設在後面插入 */var addCssRule = function() { // 建立一個 style， 返回其 stylesheet 對象 function createStyleSheet() {  var style = document.createElement('style');  style.type = 'text/css';  document.head.appendChild(style);  return style.sheet; }  // 建立 stylesheet 對象 var sheet = createStyleSheet();  // 返回介面函數 return function(selector, rules, index) {  index = index || 0;  sheet.insertRule(selector + "{" + rules + "}", index); }}();

以上就是JavaScript動態插入CSS的方法，希望對大家的學習有所協助。