導航:首頁 > 編程語言 > javascript引入css

javascript引入css

發布時間:2023-05-15 03:26:45

⑴ 如何實現javaScript動態載入CSS和js文件

項目中需要用到動態載入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

⑶ 如何在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了。

閱讀全文

與javascript引入css相關的資料

熱點內容
zycommentjs 瀏覽:414
確認全血細胞減少看哪些數據 瀏覽:265
文件有哪些要求 瀏覽:484
cad打開時會出現兩個文件 瀏覽:65
什麼是轉基因網站 瀏覽:48
手柄設備有問題代碼43 瀏覽:921
怎麼他么怎麼又網路了 瀏覽:649
java會出現內存泄露么 瀏覽:617
蘋果4s鎖屏後怎麼還顯示歌曲 瀏覽:207
鴻蒙系統文件管理哪些可以刪除 瀏覽:550
ubuntuqt創建工程沒有配置文件 瀏覽:126
網站登錄變成其他網站怎麼處理 瀏覽:202
ug數控編程學校有哪些 瀏覽:203
java圖片上傳顯示 瀏覽:402
ppt的文件名後綴 瀏覽:902
ug編程軟體下載到哪個盤 瀏覽:359
炫酷字體APP下載的文件在哪裡 瀏覽:668
廊坊哪裡有少兒編程機構 瀏覽:312
cad新文件能找回來嗎 瀏覽:951
導出手機qq文件到u盤 瀏覽:456

友情鏈接