鮮爲人知的JS調用樣式的方法---document.createElement().addRu...

不少人可能在調用css樣式都是使用傳統的方式調用其實有不少方法能夠進行調用，如使用內嵌樣式，在html直接加入樣式，給定外部樣式文件，在外部樣式文件中使用 @import

url(樣式文件路徑)，這些都是你們經常使用的，其實還有就是使用javascript進行樣式的定義。

第一種：

var style = document.createElement(’link’);
style.href = ’style.css’;
style.rel = ’stylesheet’;
style.type = ‘text/css’;
document.getElementsByTagName(’HEAD’).item(0).appendChild(style);

第二種簡單：

document.createStyleSheet(style.css);

動態的 style 節點，使用程序生成的字符串：

var style = document.createElement(’style’);
style.type = ‘text/css’;
style.innerHTML=」body{ background-color:blue; }」;
document.getElementsByTagName(’HEAD’).item(0).appendChild(style);

可是在上面只能在Firefox兼容，在IE裏卻不支持。

var sheet = document.createStyleSheet();
sheet.addRule(’body’,'background-color:red’);

若是按照上面的話就能成功，可是很麻煩，要把字符串拆開寫。

我一直在搜索着用javascript定義樣式的代碼，終於找到了，代碼以下。

document.createStyleSheet(」javascript:’body{background-color:blue;’」);

但用上面的javascript代碼惟一的缺點就是url 最大 255 個字符，長一點的就不行了，通過 SXPCrazy 提示，將代碼進行修改爲以下：

window.style=」body{background-color:blue;」;
document.createStyleSheet(」javascript:style」);

完美解決！！代碼:

<script> function blue(){ if(document.all){ window.style="body{background-color:blue;"; document.createStyleSheet("javascript:style"); }else{ var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML="body{ background-color:blue }"; document.getElementsByTagName('HEAD').item(0).appendChild(style); } } </script>

以上是完整代碼！