javascript 動態(tài)加載 css 方法總結(jié)
更新時間：2009年07月11日 13:35:41 作者：
有時候我們在設(shè)計網(wǎng)頁的時候想動態(tài)的加載css文件,并不是將css文件寫死在頁面中,這時就可以使用下面方法.
1. 用在外部CSS文件中加載必須的文件
@importurl(style.css);
//只能用在CSS文件中或者style標簽中
2. 簡單的在頁面中加載一個外部CSS文件
document.createStyleSheet(cssFile);
2. 用createElement方法創(chuàng)建CSS的Link標簽
varhead=document.getElementsByTagName('HEAD').item(0);
varstyle=document.createElement('link');
style.href='style.css';
style.rel='stylesheet';
style.type='text/css';
head.appendChild(style);
下面是經(jīng)常會用到的兩個函數(shù).
functionloadJs(file){
varscriptTag=document.getElementById('loadScript');
varhead=document.getElementsByTagName('head').item(0);
if(scriptTag)head.removeChild(scriptTag);
script=document.createElement('script');
script.src="../js/mi_"+file+".js";
script.type='text/javascript';
script.id='loadScript';
head.appendChild(script);
}
functionloadCss(file){
varcssTag=document.getElementById('loadCss');
varhead=document.getElementsByTagName('head').item(0);
if(cssTag)head.removeChild(cssTag);
css=document.createElement('link');
css.href="../css/mi_"+file+".css";
css.rel='stylesheet';
css.type='text/css';
css.id='loadCss';
head.appendChild(css);
}
@importurl(style.css);
//只能用在CSS文件中或者style標簽中
2. 簡單的在頁面中加載一個外部CSS文件
document.createStyleSheet(cssFile);
2. 用createElement方法創(chuàng)建CSS的Link標簽
varhead=document.getElementsByTagName('HEAD').item(0);
varstyle=document.createElement('link');
style.href='style.css';
style.rel='stylesheet';
style.type='text/css';
head.appendChild(style);
下面是經(jīng)常會用到的兩個函數(shù).
復制代碼 代碼如下:
functionloadJs(file){
varscriptTag=document.getElementById('loadScript');
varhead=document.getElementsByTagName('head').item(0);
if(scriptTag)head.removeChild(scriptTag);
script=document.createElement('script');
script.src="../js/mi_"+file+".js";
script.type='text/javascript';
script.id='loadScript';
head.appendChild(script);
}
functionloadCss(file){
varcssTag=document.getElementById('loadCss');
varhead=document.getElementsByTagName('head').item(0);
if(cssTag)head.removeChild(cssTag);
css=document.createElement('link');
css.href="../css/mi_"+file+".css";
css.rel='stylesheet';
css.type='text/css';
css.id='loadCss';
head.appendChild(css);
}
相關(guān)文章
這篇文章主要為大家詳細介紹了javascript異步編程，其實作為一種編程語言Javascript的異步編程是一個非常值得討論的有趣話題，感興趣的小伙伴們可以參考一下2016-02-02
接上一文，我們已經(jīng)實現(xiàn)了圖片的自動淡入淡出播放。接下來需要加入控制器。2010-10-10
Three.js+React使二維圖片呈現(xiàn)3D效果
這篇文章主要為大家介紹了如何利用Three.js+React技術(shù)棧，將二維漫畫圖片轉(zhuǎn)化為三維視覺效果。文中的實現(xiàn)方法講解詳細，需要的可以參考一下2022-02-02
js，jquery滾動/跳轉(zhuǎn)頁面到指定位置的實現(xiàn)思路
這篇文章主要介紹了如何通過js或jquery滾動/跳轉(zhuǎn)頁面到指定位置,需要的朋友可以參考下2014-06-06
如何使用bootstrap框架 bootstrap入門必看!
如何使用bootstrap？這篇文章就是告訴大家如何使用bootstrap框架，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要為大家詳細介紹了bootstrap彈出層的多種觸發(fā)方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
js給對象動態(tài)添加、設(shè)置、刪除屬性名與屬性值實例代碼
由于項目需要常常會遇到為某一個對象動態(tài)添加屬性的情況,下面這篇文章主要給大家介紹了關(guān)于js給對象動態(tài)添加、設(shè)置、刪除屬性名與屬性值的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
下面小編就為大家?guī)硪黄狫S原生帶小白點輪播圖實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
JavaScript中const、var和let區(qū)別淺析
在JavaScript中有三種聲明變量的方式：var、let、const。但是有朋友不清楚這三種聲明變量的區(qū)別，下面腳本之家小編給大家詳細介紹下js中const、var和let的區(qū)別，感興趣的朋友一起看看吧2016-10-10
這篇文章主要介紹了淺談webpack 自動刷新與解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04