如何利用javascript函數加入css樣式程式碼實例詳解-js教程-PHP中文網

首頁

web前端

js教程

如何利用javascript函數加入css樣式程式碼實例詳解

伊谢尔伦

Jul 21, 2017 pm 03:13 PM

css javascript

先給函數。

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(&#39;style&#39;);//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(&#39;head&#39;)[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=&#39;#{form_authenticity_token}&#39;"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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7504

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。