動態載入CSS檔案，這個時常會用到，一般搞前端，我們最先想到的就是用JS來實現，的確，JS可以很方便的控制CSS樣式表檔案的動態插入，以下兩種方法：使用<style>標籤插入頁面樣式、在頁面中動態引入外部樣式，都是動態載入CSS的常用方法。
一、使用<style>標籤插入頁面樣式
這點採用了YUI外掛程式中的一個方法，有效解決了各大瀏覽器的相容性問題，主要是使用style.appendChild(document.createTextNode(styles));採用createTextNode將CSS代碼添加到<style>標籤內，看代碼：
| 代碼如下 |
複製代碼 |
<script>
function includeStyleElement(styles,styleId) {
if (document.getElementById(styleId)) {
return
}
var style = document.createElement("style");
style.id = styleId;
//為ie設定屬性
/*if (isIE()) {
style.type = "text/css";
style.media = "screen"
}*/
(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
if (style.styleSheet) { //for ie
style.styleSheet.cssText = styles;
} else {//for w3c
style.appendChild(document.createTextNode(styles));
}
}
var styles = "#div{background-color: #FF3300; color:#FFFFFF }";
includeStyleElement(styles,"newstyle");
</script> |
這樣頁面中的元素就能直接應用樣式了，不管你的這些元素是不是通過指令碼追加的。
二、頁面中引入外部樣式：
在<head>中使用<link>標籤引入一個外部樣式檔案，這個方法相對簡單，而且也不存在瀏覽器的相容性問題，看代碼
| 代碼如下 |
複製代碼 |
<script>
function includeLinkStyle(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
includeLinkStyle("/css/reset.cssv=20140222"
</script> |
如果使用的樣式比較少，這種方法似乎有些小題大做了，僅供參考吧。
