前面的話 很多時候,DOM操作比較簡單明瞭,因此用javascript生成那些通常原本是HTML代碼生成的內容並不麻煩。但由於瀏覽器充斥著隱藏的陷阱和不相容問題,處理DOM中的某些部分時要複雜一些,比如動態樣式就相對較複雜 所謂動態樣式,是指在頁面載入時並不存在,在頁面載入完成後動態添加到頁面的樣式 ...
前面的話
很多時候,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>