如何利用javascript函数添加css样式代码实例详解
先给出函数。
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");
}Atas ialah kandungan terperinci 如何利用javascript函数添加css样式代码实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
Cara melihat tarikh bootstrap
Apr 07, 2025 pm 03:03 PM
Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.
