- 1、如何在css中 加入js呢
- 2、javascript如何添加css類
- 3、在JS文件中調用外部CSS文件
css是樣式表,js是事件效果,這兩個根本就不是一個東西,style是添加樣式的,script是添加js的,只能說你的想法很奇葩,那樣實現不了。js裏面可以添加css,但是反過來的我還沒見過,貌似看到過在css裏面引入js文件的,但是直接寫代碼的是沒有。
JavaScript動態建立或增加CSS樣式表,參考如下:
1、簡單的方法:
document.createStyleSheet().cssText = ‘標籤{color:red;’ +
// 這個注釋只在當前JS中幫助理解,並不會寫入CSS中
‘width:300px;height:150px}’ +
‘.類名{……}’ +
‘#ID們{……}’
2、比較完美的方法,防止重複添加,通過添加樣式表ID並對其判斷來實現:
if (!document.styleSheets[‘要建立的樣式表ID如theforever’]) { //先檢查要建立的樣式表ID是否存在,防止重複添加
var ss = document.createStyleSheet();
ss.owningElement.id = ‘要建立的樣式表ID如theforever’;
ss.cssText = ‘標籤{display:inline-block;overflow:hidden;’ +
// 這個注釋只在當前JS中幫助理解,並不會寫入CSS中
‘text-align:left;width:300px;height:150px}’ +
‘.類名{……}’ +
‘#ID們{……}’
;
}
JS文件中動態調用外部css, 文件方法如下:
function loadExtentFile(filePath, fileType){
if(fileType == “js”){
var oJs = document.create_rElement(‘script’);
oJs.setAttribute(“type”,”text/javascript”);
oJs.setAttribute(“src”, filename);//文件的地址 ,可為絕對及相對路徑
document.getElementsByTagName_r(“head”)[0].appendChild(oJs);//綁定
}else if(fileType == “css”){
var oCss = document.create_rElement(“link”);
oCss.setAttribute(“rel”, “stylesheet”);
oCss.setAttribute(“type”, “text/css”);
oCss.setAttribute(“href”, filename);
document.getElementsByTagName_r(“head”)[0].appendChild(oCss);//綁定
}
}
loadExtentFile(“js/func.js”, “js”);
loadExtentFile(“default.css”, “css”);
清空:
var lists = document.getElementsByTagName_r(“link”);
for ( var i = 0; i lists.length; i++) {
if (lists[i].getAttribute(“href”).indexOf(“.css”) != -1) == -1) {
lists[i].parentNode.removeChild(lists[i]);
}
}
上面的判斷語句中可以加入自己的判斷。
原創文章,作者:VY0S1,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/126145.html