前面的話

　　很多時候，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>

總結

以上是生活随笔為你收集整理的深入理解脚本化CSS系列第五篇——动态样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。