JS函數實現動態添加CSS樣式表檔案

來源:互聯網
上載者:User

先給出函數。 複製代碼 代碼如下:varaddSheet=function(){
vardoc,cssCode;
if(arguments.length==1){
doc=document;
cssCode=arguments[0]
}elseif(arguments.length==2){
doc=arguments[0];
cssCode=arguments[1];
}else{
alert("addSheet函數最多接受兩個參數!");
}
if(!+"v1"){//增加自動轉換透明度功能,使用者只需輸入W3C的透明樣式,它會自動轉換成IE的透明濾鏡
vart=cssCode.match(/opacity:(d?.d+);/);
if(t!=null){
cssCode=cssCode.replace(t[0],"filter:alpha(opacity="+parseFloat(t[1])*100+")")
}
}
cssCode=cssCode+" ";//增加末尾的分行符號,方便在firebug下的查看。
varheadElement=doc.getElementsByTagName("head")[0];
varstyleElements=headElement.getElementsByTagName("style");
if(styleElements.length==0){//如果不存在style元素則建立
if(doc.createStyleSheet){//ie
doc.createStyleSheet();
}else{
vartempStyleElement=doc.createElement('style');//w3c
tempStyleElement.setAttribute("type","text/css");
headElement.appendChild(tempStyleElement);
}
}
varstyleElement=styleElements[0];
varmedia=styleElement.getAttribute("media");
if(media!=null&&!/screen/.test(media.toLowerCase())){
styleElement.setAttribute("media","screen");
}
if(styleElement.styleSheet){//ie
styleElement.styleSheet.cssText+=cssCode;
}elseif(doc.getBoxObjectFor){
styleElement.innerHTML+=cssCode;//Firefox支援直接innerHTML添加樣式表字串
}else{
styleElement.appendChild(doc.createTextNode(cssCode))
}
}

  有時我們需要在.js檔案對文檔動態引入一些CSS樣式。對於一些短小的CSS代碼來說,這好辦,我們可以調用其style方法,如 複製代碼 代碼如下:varddd=document.getElementById("ddd");
ddd.style.border="1pxsolidred";

  如果再長一點也無所謂: 複製代碼 代碼如下:varddd=document.getElementById("ddd");
ddd.style.cssText="border:1pxsolidred;color:#000;background:#444;float:left";

  本人而言,我是喜歡後者。因為前者有嚴重的相容問題。如float這個樣式,在IE是styleFloat,在Firefox等W3C標準遊覽器是cssFloat。而cssText則是通吃。
  如果很長,我們可以動態匯入一CSS檔案。如 複製代碼 代碼如下:functionaddSheetFile(path){
varfileref=document.createElement("link")
fileref.rel="stylesheet";
fileref.type="text/css";
fileref.href=path;
fileref.media="screen";
varheadobj=document.getElementsByTagName('head')[0];
headobj.appendChild(fileref);
}

  這個函數在IE中有點累贅。我向來是支援哪個遊覽器就用哪個遊覽器的原生函數,直接使用二進位代碼效率最高。 複製代碼 代碼如下:varoStylesheet=document.createStyleSheet(sURL,iIndex);

  createStyleSheet帶的兩個參數都是可選的。
  但如果我們的樣式是某個頁面專屬的,而且只有管理員才能使用到,而且那部分頁面是動態產生的,我們需要一開始就引入它嗎?需要特意弄個檔案來裝載它嗎?最好的方法讓這些樣式與動態指令碼捆綁在一起。我這個函數就為此而開發的。
  坦白說,它最開始是為富文字編輯器而開發的。大家都知道,富文本輸入框最流行的做法是把要輸入的內容放到iframe中,這就涉及到兩種document,一個首頁面的document,另一個是iframe的document。iframe的document又涉及到相容問題。我們可以:
variframe=document.createElement('iframe');//產生用於編輯的richtexteditor
variframeDocument=iframe.contentDocument||iframe.contentWindow.document;
……
  嘛,扯遠了。總而言之,函數最開始的判定就是為這兩種document而準備。如果沒有涉及到iframe,我們只傳入一個參數就行了。最後一個參數永遠是CSS字串。
  然後是動態產生styleSheet元素,把CSS字串加入到此元素的問題。當然如果有現階段的,當然就用現成的。DOM元素越多對遊覽器的負擔就越大。我們想到document.styleSheets方法。它返回一個集合,包含style元素與link元素,還涉及一相容問題,如: 複製代碼 代碼如下:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="  
<head>
<metahttp-equiv="content-type"content="text/html;charset=UTF-8"/>
<%#強制IE8像IE7一樣呈現網頁-%>
<metahttp-equiv=”X-UA-Compatible”content=”IE=EmulateIE7″/>
<%#--預設所有的連結都在本視窗開啟-%>
<basetarget="_self"/>
<title><%=h(yield(:title))||controller.action_name%></title>
<%=stylesheet_link_tag"screen","button","style"%>
<linkrel="stylesheet"href="/stylesheets/print.css"type="text/css"media="print">
<!--[ifltIE8]>
<linkrel="stylesheet"href="/stylesheets/ie.css"type="text/css"media="screen">
<![endif]-->
<%=javascript_tag"window._token='#{form_authenticity_token}'"ifActionController::Base.allow_forgery_protection%>
<%=javascript_include_tag:defaults%>
<styletype="text/css"media="print"></style>
</head>

  上面用alert(document.styleSheets.length);測試一下,IE返回6,W3C遊覽器返回5。因此,否決了它。而且我們只用到style元素,不使用外聯。第二部分的判定就針對head中的style元素而言,沒有就建立一個。然後我們把CSS字串加在第一個style元素就行了。
  接著我們要加把保險鎖,因為當media="print"時,只在頁面列印時,定義的效果才有效。為了防止第一個style元素的media值不是screen,我們得改一改。 複製代碼 代碼如下:varstyleElement=styleElements[0];
varmedia=styleElement.getAttribute("media");
if(media!=null&&!/screen/.test(media.toLowerCase())){
styleElement.setAttribute("media","screen");
}

  附上media的一些說明。
  screen(預設值),提交到電腦螢幕;
  print,輸出到印表機;
  projection,提交到投影機;
  aural,擴音器;
  braille,提交到凸字觸覺感知裝置;
  tty,電傳打字機(使用固定的字型);
  tv,電視機;
  all,所有輸出裝置。
  最後是如此添加的問題。分IE,Firefox與其他遊覽器三種。判定遊覽器也用各自的私人屬性或方法。如styleSheet是IE獨用的,getBoxObjectFor是Firefox獨用的(當然你也可以使用(/firefox/.test(navigator.userAgent.toLowerCase())),通常DOM操作是最耗時的,能用私人就用私人!
  使用方法。 複製代碼 代碼如下:addSheet("
.RTE_iframe{width:600px;height:300px;}
.RTE_toolbar{width:600px;}
.color_result{width:216px;}
.color_view{width:110px;height:25px;}
.color_code{text-align:center;font-weight:700;color:blue;font-size:16px;}
div.table{width:176px;position:absolute;padding:1px;}
div.tabletd{font-size:12px;color:red;text-align:center;}
");*/
  對比一下51js的客服果果指令碼,更短小,但是它會可能會建立多個style元素,還有一些效率的問題……畢竟我這個最初是為開發富文本編輯而開發的,功能不強大不行啊!
/*
動態添加樣式表的規則
*/
iCSS={add:function(css){
varD=document,$=D.createElement('style');
$.setAttribute("type","text/css");
$.styleSheet&&($.styleSheet.cssText=css)||
$.appendChild(D.createTextNode(css));
D.getElementsByTagName('head')[0].appendChild($);
}};
iCSS.add("
.dhoooListBox,.dhoooListBoxli{margin:0;padding:0;list-style-type:none;font-size:12px;cursor:default}
.dhoooListBox{border:1pxsolid#aaa;width:180px;background:#eee;height:200px;overflow:auto;float:left}
.dhoooListBoxli{margin:5px;line-height:24px;background:url(images/smilies/time.gif)no-repeat060%;padding-left:25px;color:#555;}
.dhoooListBoxli.selected{background-color:#FFCC33}
");
  最後追加幾個相關的方法:
vargetClass=function(ele){
returnele.className.replace(/s+/,'').split('');
};
varhasClass=function(ele,cls){
returnele.className.match(newRegExp('(\s|^)'+cls+'(\s|$)'));
}
varaddClass=function(ele,cls){
if(!this.hasClass(ele,cls))ele.className+=""+cls;
}
varremoveClass=function(ele,cls){
if(hasClass(ele,cls)){
varreg=newRegExp('(\s|^)'+cls+'(\s|$)');
ele.className=ele.className.replace(reg,'');
}
}

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。