項目中需要用到動態載入CSS 文件,整理了一下,順便融合了動態載入JS 的功能寫成了一個對象,先上代碼:
var dynamicLoading = {
css: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = path;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
},
js: function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = path;
script.type = 'text/javascript';
head.appendChild(script);
}
}
對象包含兩個完全獨立的方法,分別用來載入CSS 文件和JS 文件,參數均為欲載入的文件路徑。原理非常的簡單:對於不同的載入文件類型創建不同的節點,然後添加各自的屬性,最後扔到head 標簽裡面。經測試,本方法兼容各瀏覽器,安全、無毒、環保,是 web 開發人員工作常備代碼。
下面是調用代碼,異常簡單:
//動態載入 CSS 文件
dynamicLoading.css("test.css");
//動態載入 JS 文件
dynamicLoading.js("test.js");
⑵ HTML中引入css和js的方法
我們在HTML中經常需要引入CSS和JS文件,那麼如何引入呢?下面我給大家演示一下。
Sublime Text
首先新建一個文件夾,在文件夾下面建立如下圖所示的文件
接下來用Sublime Text打開HTML文件,寫入HTML結構,如下圖所示
然後我們在Head標簽內用link標簽引入CSS文件,如下圖所示
最後用Script標簽引入JS文件即可,如下圖所示
⑶ 如何在Require.js的模塊中引入css
require有個text組件的.引用組件後.define中只要text!css/style.css就可以引運喚用引用css文件就可以了.也可以引用html模板文件
define(["require"],function(require){
varcssUrl=require.toUrl("./style.css");
varlink=document.createElement("link"旁凱凱);
link.type="text/css";
link.rel="孫跡stylesheet";
link.href=cssUrl;
document.getElementsByTagName("head")[0].appendChild(link);
});
⑷ 如何在JS中定義CSS
vardomObj=document.getElementById("tagId");
//使用domObj.style來設置css:
domObj.style.backgroundColor="#000";//對應style里background-color
domObj.style.fontSize="#000";//對應style里font-size
//如果對這個表不太清楚可以在w3c上查一下
//但是一般有個規律就是,首單版詞小寫「-」後面的權第一個字母大寫,如:font-size就是fontSize
如果是想更換標簽的class的話,可以使用
domObj.className="other_class";
⑸ 外部js怎麼引用css
你說的制是用jQuery里的addClass方法吧(抱歉js原生暫時沒發現該方法),那就要先引入jQuery.js,然後再引入a.js,可以這樣做:
1、在c.css里寫好你的樣式:.cssStyle {你的樣式};
2、然後在a.js里加入$('span').addClass('cssStyle')即可。
如果你的意思不是這個,那我猜你應該是想說怎麼直接在js里操作css樣式吧,那就可以這樣:
var spanEl = document.querySelectorAll('span');
然後根據你的要求寫樣式,比如你要修改背景顏色為紅色:
spanEl .style.background = 『red』;
希望我的回答能幫助到你,謝謝!
⑹ 如何javascript獲取css中的樣式
方式一:
//找到dom對象抄使用style屬性
alert(document.getElementById('元素id').style.color);//取顏色
alert(document.getElementById('元素id').style.fontSize);//取字體大小
所有-分割的樣式名字,都去掉-該大小寫譬如font-size=>fontSize
這個方式有弊端,通常只能獲取到行內樣式,所謂行內樣式就是寫在元素上的style屬性
如下:
<ahref="#"style='color:red;,font-size:15px;'>這是個a標簽</a>
方式二:
//用jQuery獲取
alert($('#元素id').css('color'));
alert($('#元素id').css('fontSize'));//這個靠譜,都能獲取到
⑺ javascript實現動態導入js與css等靜態資源文件的方法
本文實例講述了javascript實現動態導入js與css等靜態資源文件的方法。分享給大家供大家參考。具體實現方法如下:
/**
*
動態導入靜態資源文件js/css
*/
var
$import
=
function(){
return
function(rId,
res,
callback){
if(res
&&
'string'
==
typeof
res){
if(rId){
if($($('#'
+
rId),
$('head')).length>0){
return;
}
}
//載入資源文件
var
sType
=
res.substring(res.lastIndexOf('.')
+
1);
//
支持js/css
if(sType
&&
('js'
==
sType
||
'css'
==
sType)){
var
isScript
=
(sType
==
'js');
var
tag
=
isScript
?
'script'
:
'link';
var
head
=
document.getElementsByTagName('head')[0];
//
創建節點
var
linkScript
=
document.createElement(tag);
linkScript.type
=
isScript
?
'text/javascript'
:
'text/css';
linkScript.charset
=
'UTF-8';
if(!isScript){
linkScript.rel
=
'stylesheet';
}
isScript
?
linkScript.src
=
res
:
linkScript.href
=
res;
if(callback
&&
'function'
==
typeof
callback){
if
(linkScript.addEventListener){
linkScript.addEventListener('load',
function(){
callback.call();
},
false);
}
else
if
(linkScript.attachEvent)
{
linkScript.attachEvent('onreadystatechange',
function(){
var
target
=
window.event.srcElement;
if
(target.readyState
==
'complete')
{
callback.call();
}
});
}
}
head.appendChild(linkScript);
}
}
};
}();
希望本文所述對大家的javascript程序設計有所幫助。
⑻ 用js文件怎麼引入其他js文件和css文件
方法一,在調用文件的頂部加入下例代碼:
document.write(」<scriptlanguage=javascriptsrc=』/js/import.js』></script>」);
(註:有時你引用的文件還可能需要引用其他的js,我們需要將需要的那個js文件也以同樣的方法引用進來)
方法二,通過中間界面對js進行應用
就是我們可以在某個html中引用了你需要的js文件,我們可以通過拿到那個html文件的對象,然後在通過這個對象去引用js的方法。
(一般不常用)
方法三:在將下邊代碼放入Body中:
new_element=document.createElement(」script」);
new_element.setAttribute(」type」,」text/javascript」);
new_element.setAttribute(」src」,」import.js」);
document.body.appendChild(new_element);
我們來分析一下關鍵的幾句代碼:
首先,我們利用document.createElement(」script」)生成了一個script的標簽,設置其 type屬性為text/javascript,src為import.js(這里的1.js同2.js放在同一個目錄,也可放在不同的目錄)。最後將這個標簽動態 地加入body中。如此一來,我們就可以調用到不同js文件中的方法了。
注意:<script language=」JAVASCRIPT」 src=』1.js』></script>一定要放在body下面。
因為在2.js中用到了body(document.body.appendChild(new_element);)
如果將引如2.js的代碼放在body上面,也就是說,
進入頁面後,還沒有生成body就已經執行b.js里的document.body.appendChild(new_element);了。
這時body不存在就會拋JavaScript錯誤。
⑼ 在JS文件中調用外部CSS文件
有點不明來白你的意思。自
是不是這樣: 你的一個html頁面裡面本來包含一個框架頁,後來你想把框架頁換成一個js包含進去。
頁面載入 js 跟 框架 是不一樣的。
框架里的頁面是獨立的,不能共享父頁面的css。js就不一樣了,他用的是父頁面的css。
最簡單的是你先把你框架頁<body> ………… </body>之間的代碼寫進父頁面,用的css也寫在父頁面,然後看顯示時候正常,再把這段代碼寫到js里,引進去OK了。