如何利用javascript函數加入css樣式程式碼實例詳解
- 伊谢尔伦原創
- 2017-07-21 15:13:002554瀏覽
先給函數。
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;//火狐支持直接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";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");
}以上是如何利用javascript函數加入css樣式程式碼實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！