亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript動(dòng)態(tài)插入CSS的方法

 更新時(shí)間:2015年12月10日 11:42:55   作者:snandy  
這篇文章主要介紹了JavaScript動(dòng)態(tài)插入CSS的方法,兩個(gè)步驟就可以實(shí)現(xiàn)JavaScript動(dòng)態(tài)插入CSS

寫組件時(shí)有時(shí)想把一些組件特性相關(guān)的 CSS 樣式封裝在 JS 里,這樣更內(nèi)聚,改起來方便。JS 動(dòng)態(tài)插入 CSS 兩個(gè)步驟:創(chuàng)建1、一個(gè) style 對(duì)象
2、使用 stylesheet 的 insertRule 或 addRule 方法添加樣式

一、查看樣式表

先看下 document.styleSheets,隨意打開一個(gè)頁面

其中前三個(gè)是通過 link 標(biāo)簽引入的 CSS 文件,第四個(gè)是通過 style 標(biāo)簽內(nèi)聯(lián)在頁面里的 CSS。有如下屬性

 每一個(gè) cssRule 又有如下屬性

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

二、動(dòng)態(tài)插入 CSS
首先,需要?jiǎng)?chuàng)建一個(gè) style 對(duì)象,返回其 stylesheet 對(duì)象

/*
 * 創(chuàng)建一個(gè) style, 返回其 stylesheet 對(duì)象
 * 注意: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 如下

/*
 * 動(dòng)態(tài)添加 CSS 樣式
 * @param selector {string} 選擇器
 * @param rules {string} CSS樣式規(guī)則
 * @param index {number} 插入規(guī)則的位置, 靠后的規(guī)則會(huì)覆蓋靠前的
 */
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); 
 }
}

需要注意,標(biāo)準(zhǔn)瀏覽器支持 insertRule, IE低版本則支持 addRule。
完整代碼如下

/*
 * 動(dòng)態(tài)添加 CSS 樣式
 * @param selector {string} 選擇器
 * @param rules {string} CSS樣式規(guī)則
 * @param index {number} 插入規(guī)則的位置, 靠后的規(guī)則會(huì)覆蓋靠前的
 */
var addCssRule = function() {
 // 創(chuàng)建一個(gè) style, 返回其 stylesheet 對(duì)象
 // 注意: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 對(duì)象
 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); 
  }
 }
}();


如果只支持移動(dòng)端或現(xiàn)代瀏覽器,可以去掉低版本IE判斷的代碼

/*
 * 動(dòng)態(tài)添加 CSS 樣式
 * @param selector {string} 選擇器
 * @param rules {string} CSS樣式規(guī)則
 * @param index {number} 插入規(guī)則的位置, 靠后的規(guī)則會(huì)覆蓋靠前的,默認(rèn)在后面插入
 */
var addCssRule = function() {
 // 創(chuàng)建一個(gè) style, 返回其 stylesheet 對(duì)象
 function createStyleSheet() {
  var style = document.createElement('style');
  style.type = 'text/css';
  document.head.appendChild(style);
  return style.sheet;
 }
 
 // 創(chuàng)建 stylesheet 對(duì)象
 var sheet = createStyleSheet();
 
 // 返回接口函數(shù)
 return function(selector, rules, index) {
  index = index || 0;
  sheet.insertRule(selector + "{" + rules + "}", index);
 }
}();

以上就是JavaScript動(dòng)態(tài)插入CSS的方法,希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論