深入理解腳本化CSS系列第五篇——動態樣式 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　很多時候，DOM操作比較簡單明了，因此用javascript生成那些通常原本是HTML代碼生成的內容并不麻煩。但由于瀏覽器充斥著隱藏的陷阱和不兼容問題，處理DOM中的某些部分時要復雜一些，比如動態樣式就相對較復雜

　　所謂動態樣式，是指在頁面加載時并不存在，在頁面加載完成后動態添加到頁面的樣式

　　動態樣式包括兩種情況：一種是通過<link>元素插入外部樣式表，另一種是通過<style>元素插入內部樣式。下面將詳細介紹這兩種情況

外部樣式

/*style.css里面的內容*/
.box{height:100px;width:100px;background-color: pink;}

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
var head = document.getElementsByTagName('head')[0];
head.appendChild(link);

　　使用函數封裝如下：

<div class="box">測試文字</div>
<button id="btn">動態添加樣式</button>
<script>
function loadStyles(url){
    loadStyles.mark = 'load';
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(link); 
}
btn.onclick = function(){
    if(loadStyles.mark != 'load'){
        loadStyles("style.css");        
    }
}
</script>

內部樣式

var style = document.createElement("style");
style.type = "text/css";
style.innerHTML = ".box{height:100px;width:100px;background-color: pink;}";
var head = document.getElementsByTagName('head')[0];
head.appendChild(style);

　　使用函數封裝如下：

<div class="box">測試文字</div>
<button id="btn">動態添加樣式</button>
<script>
function loadStyles(str){
    loadStyles.mark = 'load';
    var style = document.createElement("style");
    style.type = "text/css";
    style.innerHTML = str;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style); 
}
btn.onclick = function(){
    if(loadStyles.mark != 'load'){
        loadStyles(".box{height:100px;width:100px;background-color: pink;}");        
    }
}
</script>

　　[注意]該方法在IE8-瀏覽器中報錯，因為IE8-瀏覽器將<style>視為當作特殊的節點，不允許訪問其子節點或設置innerHTML屬性

兼容寫法

　　動態插入內部樣式時，存在兼容問題，下面有兩種兼容處理辦法

兼容一

　　IE瀏覽器支持訪問并修改元素的CSSStyleSheet對象的cssText屬性，通過修改該屬性可實現類似效果

<div class="box">測試文字</div>
<button id="btn">動態添加樣式</button>
<script>
function loadStyles(str){
    loadStyles.mark = 'load';
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        style.innerHTML = str;
    }catch(ex){
        style.styleSheet.cssText = str;
    }
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(style); 
}
btn.onclick = function(){
    if(loadStyles.mark != 'load'){
        loadStyles(".box{height:100px;width:100px;background-color: pink;}");        
    }
}
</script>

兼容二

　　作用域元素是微軟自己的一個定義，一般來說頁面中看到的元素是有作用域的元素，頁面中看不到的元素就是無作用域的元素

　　在IE8-瀏覽器中，<style>元素是一個沒有作用域的元素，如果通過innerHTML插入的字符串開頭就是一個無作用域的元素，那么IE8-瀏覽器會在解析這個字符串前先刪除該元素

　　所以，下面這段代碼是無效的

div.innerHTML = '<style>div{height:100px;}</style>';

　　于是，可以通過增加一個'_'文本節點，然后再刪除使之有效

    div.innerHTML = "_<style>div{height:100px;}</style>";
    div.removeChild(div.firstChild);

<div class="box">測試文字</div>
<button id="btn">動態添加樣式</button>
<script>
function loadStyles(str){
    loadStyles.mark = 'load';
    var div = document.createElement("div");
    div.innerHTML = '_' + '<style>' + str+'</style>';
    div.removeChild(div.firstChild);
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(div.firstChild); 
    div = null;
}
btn.onclick = function(){
    if(loadStyles.mark != 'load'){
        loadStyles(".box{height:100px;width:100px;background-color: pink;}");        
    }
}
</script>