寫組件時有時想把一些組件特性相關(guān)的 CSS 樣式封裝在 JS 里，這樣更內(nèi)聚，改起來方便。JS 動態(tài)插入 CSS 兩個步驟:創(chuàng)建1、一個 style 對象
2、使用 stylesheet 的 insertRule 或 addRule 方法添加樣式
一、查看樣式表
先看下 document.styleSheets，隨意打開一個頁面
其中前三個是通過 link 標簽引入的 CSS 文件，第四個是通過 style 標簽內(nèi)聯(lián)在頁面里的 CSS。有如下屬性
每一個 cssRule 又有如下屬性
其中的 cssText 正是寫在 style 的源碼。
二、動態(tài)插入 CSS
首先，需要創(chuàng)建一個 style 對象，返回其 stylesheet 對象
/* * 創(chuàng)建一個 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;} 添加函數(shù) addCssRule 如下
/* * 動態(tài)添加 CSS 樣式 * @param selector {string} 選擇器 * @param rules {string} CSS樣式規(guī)則 * @param index {number} 插入規(guī)則的位置, 靠后的規(guī)則會覆蓋靠前的 */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。
完整代碼如下
/* * 動態(tài)添加 CSS 樣式 * @param selector {string} 選擇器 * @param rules {string} CSS樣式規(guī)則 * @param index {number} 插入規(guī)則的位置, 靠后的規(guī)則會覆蓋靠前的 */var addCssRule = function() { // 創(chuàng)建一個 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; } // 創(chuàng)建 stylesheet 對象 var sheet = createStyleSheet(); // 返回接口函數(shù) 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); } }}();
如果只支持移動端或現(xiàn)代瀏覽器，可以去掉低版本IE判斷的代碼
/* * 動態(tài)添加 CSS 樣式 * @param selector {string} 選擇器 * @param rules {string} CSS樣式規(guī)則 * @param index {number} 插入規(guī)則的位置, 靠后的規(guī)則會覆蓋靠前的，默認在后面插入 */var addCssRule = function() { // 創(chuàng)建一個 style， 返回其 stylesheet 對象 function createStyleSheet() { var style = document.createElement('style'); style.type = 'text/css'; document.head.appendChild(style); return style.sheet; } // 創(chuàng)建 stylesheet 對象 var sheet = createStyleSheet(); // 返回接口函數(shù) return function(selector, rules, index) { index = index || 0; sheet.insertRule(selector + "{" + rules + "}", index); }}(); 以上就是JavaScript動態(tài)插入CSS的方法，希望對大家的學習有所幫助。
