DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS函數:動態添加CSS樣式表
JS函數:動態添加CSS樣式表
編輯:關於JavaScript     

網頁制作poluoluo文章簡介:有時我們需要在.js文件對文檔動態引入一些CSS樣式。對於一些短小的CSS代碼來說,這好辦,我們可以調用其style方法.

先給出函數。

01.var addSheet = function(){ 02.  var doc,cssCode; 03.  if(arguments.length == 1){ 04.    doc = document; 05.    cssCode = arguments[0] 06.  }else if(arguments.length == 2){ 07.    doc = arguments[0]; 08.    cssCode = arguments[1]; 09.  }else{ 10.    alert("addSheet函數最多接受兩個參數!"); 11.  } 12.  if(!+"\v1"){//增加自動轉換透明度功能,用戶只需輸入W3C的透明樣式,它會自動轉換成IE的透明濾鏡 13.    var t = cssCode.match(/opacity:(\d?\.\d+);/); 14.    if(t!= null){ 15.      cssCode = cssCode.replace(t[0], "filter:alpha(opacity="+ parseFloat(t[1]) * 100+")") 16.    } 17.  } 18.  cssCode = cssCode + "\n";//增加末尾的換行符,方便在firebug下的查看。 19.  var headElement = doc.getElementsByTagName("head")[0]; 20.  var styleElements = headElement.getElementsByTagName("style"); 21.  if(styleElements.length == 0){//如果不存在style元素則創建 22.    if(doc.createStyleSheet){    //ie 23.      doc.createStyleSheet(); 24.    }else{ 25.      var tempStyleElement = doc.createElement('style');//w3c 26.      tempStyleElement.setAttribute("type", "text/css"); 27.      headElement.appendChild(tempStyleElement); 28.    } 29.  } 30.  var  styleElement = styleElements[0]; 31.  var media = styleElement.getAttribute("media"); 32.  if(media != null && !/screen/.test(media.toLowerCase()) ){ 33.    styleElement.setAttribute("media","screen"); 34.  } 35.  if(styleElement.styleSheet){    //ie 36.    styleElement.styleSheet.cssText += cssCode; 37.  }else if(doc.getBoxObjectFor){ 38.    styleElement.innerHTML += cssCode;//火狐支持直接innerHTML添加樣式表字串 39.  }else{ 40.    styleElement.appendChild(doc.createTextNode(cssCode)) 41.  } 42.}

有時我們需要在.js文件對文檔動態引入一些CSS樣式。對於一些短小的CSS代碼來說,這好辦,我們可以調用其style方法,如

1.var ddd = document.getElementById("ddd"); 2.ddd.style.border = "1px solid red";

如果再長一點也無所謂:

1.var ddd = document.getElementById("ddd"); 2.ddd.style.cssText = "border:1px solid red;color:#000;background:#444;float:left";

本人而言,我是喜歡後者。因為前者有嚴重的兼容問題。如float這個樣式,在IE是styleFloat,在火狐等W3C標准游覽器是cssFloat。而cssText則是通吃。

如果很長,我們可以動態導入一CSS文件。如

01.function addSheetFile(path){ 02.    var fileref=document.createElement("link") 03.    fileref.rel = "stylesheet"; 04.    fileref.type = "text/css"; 05.    fileref.href = path; 06.    fileref.media="screen"; 07.    var headobj = document.getElementsByTagName('head')[0]; 08.    headobj.appendChild(fileref); 09.} 這個函數在IE中有點累贅。我向來是支持哪個游覽器就用哪個游覽器的原生函數,直接使用二進制代碼效率最高。 1.var oStylesheet = document.createStyleSheet ( sURL , iIndex );

createStyleSheet帶的兩個參數都是可選的。

但如果我們的樣式是某個頁面獨有的,而且只有管理員才能使用到,而且那部分頁面是動態生成的,我們需要一開始就引入它嗎?需要特意弄個文件來裝載它嗎?最好的方法讓這些樣式與動態腳本捆綁在一起。我這個函數就為此而開發的。

坦白說,它最開始是為富文本編輯器而開發的。大家都知道,富文本輸入框最流行的做法是把要輸入的內容放到iframe中,這就涉及到兩種document,一個主頁面的document,另一個是iframe的document。 iframe的document又涉及到兼容問題。我們可以:

1.        var iframe = document.createElement('iframe');//生成用於編輯的rich text editor 2.        var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; 3.……

嘛,扯遠了。總而言之,函數最開始的判定就是為這兩種document而准備。如果沒有涉及到iframe,我們只傳入一個參數就行了。最後一個參數永遠是CSS字符串。

然後是動態生成styleSheet元素,把CSS字符串加入到此元素的問題。當然如果有現階段的,當然就用現成的。DOM元素越多對游覽器的負擔就越大。我們想到document.styleSheets方法。它返回一個集合,包含style元素與link元素,還涉及一兼容問題,如:

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 02."http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 03.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 04.  <head> 05.    <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> 06.    <%# 強制IE8像IE7一樣呈現網頁 -%> 07.    <meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /> 08.    <%#--默認所有的鏈接都在本窗口打開 -%> 09.    <base target="_self" /> 10.    <title><%= h(yield(:title)) || controller.action_name  %></title> 11.    <%= stylesheet_link_tag "screen","button","style"  %> 12.    <link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print"> 13.    <!--[if lt IE 8]> 14.     <link rel="stylesheet" href="/stylesheets/ie.css" type="text/css" media="screen"> 15.    <![endif]--> 16.    <%= javascript_tag "window._token = '#{form_authenticity_token}'" if ActionController::Base.allow_forgery_protection %> 17.    <%= javascript_include_tag :defaults  %> 18.     <style type="text/css" media="print"></style> 19.  </head>

上面用alert(document.styleSheets.length);測試一下,IE返回6,W3C游覽器返回5。因此,否決了它。而且我們只用到style元素,不使用外聯。第二部分的判定就針對head中的style元素而言,沒有就創建一個。然後我們把CSS字符串加在第一個style元素就行了。

接著我們要加把保險鎖,因為當media="print"時,只在頁面打印時,定義的效果才有效。為了防止第一個style元素的media值不是screen,我們得改一改。

1.var  styleElement = styleElements[0]; 2.var media = styleElement.getAttribute("media"); 3.if(media != null && !/screen/.test(media.toLowerCase()) ){ 4.    styleElement.setAttribute("media", "screen"); 5.}

附上media的一些說明。

  • screen (缺省值),提交到計算機屏幕;
  • print, 輸出到打印機;
  • projection,提交到投影機;
  • aural,揚聲器;
  • braille,提交到凸字觸覺感知設備;
  • tty,電傳打字機 (使用固定的字體);
  • tv,電視機;
  • all,所有輸出設備。

最後是如此添加的問題。分IE,火狐與其他游覽器三種。判定游覽器也用各自的私有屬性或方法。如styleSheet是IE獨用的,getBoxObjectFor是火狐獨用的(當然你也可以使用(/firefox/.test(navigator.userAgent.toLowerCase())),通常DOM操作是最耗時的,能用私有就用私有!

使用方法。

 

01.addSheet("\ 02.  .RTE_iframe{width:600px;height:300px;}\ 03.  .RTE_toolbar{width:600px;}\ 04.  .color_result{width:216px;}\ 05.  .color_view{width:110px;height:25px;}\ 06.  .color_code{text-align:center;font-weight:700;color:blue;font-size:16px;}\ 07.  div.table{width:176px;position:absolute;padding:1px;}\ 08.  div.table td{font-size:12px;color:red;text-align:center;}\ 09." );*/

對比一下51js的客服果果腳本,更短小,但是它會可能會創建多個style元素,還有一些效率的問題……畢竟我這個最初是為開發富文本編輯而開發的,功能不強大不行啊!

01./* 02.動態添加樣式表的規則 03.*/ 04.iCSS={add:function(css){ 05.    var D=document,$=D.createElement('style'); 06.    $.setAttribute("type","text/css"); 07.    $.styleSheet&&($.styleSheet.cssText=css)|| 08.        $.appendChild(D.createTextNode(css)); 09.    D.getElementsByTagName('head')[0].appendChild($); 10.}}; 11.iCSS.add("\ 12.    .dhoooListBox,.dhoooListBox li{margin:0;padding:0;list-style-type:none;font-size:12px;cursor:default}\ 13.    .dhoooListBox{border:1px solid #aaa;width:180px;background:#eee;height:200px;overflow:auto;float:left}\ 14.    .dhoooListBox li{margin:5px;line-height:24px;background:url(images/smilies/time.gif) no-repeat 0 60%;padding-left:25px;color:#555;}\ 15.    .dhoooListBox li.selected{background-color:#FFCC33}\ 16.");

最後追加幾個相關的方法:

01.var getClass = function(ele) { 02.    return ele.className.replace(/\s+/,' ').split(' '); 03.}; 04.var hasClass = function(ele,cls) { 05.    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); 06.} 07.var addClass = function(ele,cls) { 08.    if (!this.hasClass(ele,cls)) ele.className += " "+cls; 09.} 10.var removeClass = function(ele,cls) { 11.    if (hasClass(ele,cls)) { 12.        var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); 13.        ele.className=ele.className.replace(reg,' '); 14.    } 15.}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved