加入收藏RSS訂閱SEO教程 SEO優化 SEO自學 網站優化
你的位置:首頁 ? 信息技術 ? 正文

使用JavaScript動態添加CSS樣式規則!

選擇字號: 超大 標準 發布時間:2014-9-9 10:45:11 | 作者:Searcheo | 0個評論 | 人瀏覽

本文地址:http://www.umpuhz.live/post/320.html 轉載請注明出處!

現在Web應用中有大量的JavaScript代碼,而我們也一直在追尋各種使他們更快的解決方案。

  • 我們通過 事件代理(event delegation) 讓事件監聽更高效,

  • 我們利用 函數降頻技術(function debouncing) 來限制一段時間內給定方法被調用的次數。

  • 我們使用 JavaScript加載器 來加載我們確實需要的那部分資源,等等。

還有一種方式,可以讓我們的頁面更加的快速和高效.那就是直接通過JS動態地添加和刪除樣式表中的某些樣式,用來取代不斷地查詢DOM元素,并應用各種樣式。下面是它的工作原理。

獲取樣式表
你可以選擇任意的樣式表來添加樣式規則。如果你有確定的樣式表,則可以在HTML頁面中給 <link> 或 <style> 標簽添加ID屬性,然后直接通過這個DOM元素的 sheet 屬性就可以取得 CSSStyleSheet 對象。樣式表也可以通過 document.styleSheets 遍歷到:

[javascript] view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. // 返回一個類似數組的(Array-like)樣式列表 StyleSheetList  

  2. var sheets = document.styleSheets;   

  3.   

  4. /* 

  5. 返回值類似下面這樣:   

  6.  

  7. StyleSheetList  

  8.     0: CSSStyleSheet, 

  9.     1: CSSStyleSheet, 

  10.     2: CSSStyleSheet, 

  11.     3: CSSStyleSheet, 

  12.     4: CSSStyleSheet, 

  13.     length: 5, 

  14.     item: function 

  15. */  

  16.   

  17. // 獲取第一個sheet, 先不管 media屬性  

  18. var sheet = document.styleSheets[0];  

需要特別注意的是樣式表的media屬性 —— 當你想在屏幕上顯示的時候,你肯定不能把CSS規則加到打印樣式表中。你可以仔細的看一下CSSStyleSheet對象的屬性信息:

[javascript] view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. // 控制臺輸出第一個樣式表的信息  

  2. console.log(document.styleSheets[0]);  

  3.   

  4. /* 

  5. 返回值:   

  6.  

  7. CSSStyleSheet 

  8.     cssRules: CSSRuleList[對象] 

  9.     disabled: false 

  10.     href: "http://davidwalsh.name/somesheet.css" 

  11.     media: MediaList[對象] 

  12.     ownerNode: link[對象] 

  13.     ownerRule: null 

  14.     parentStyleSheet: null 

  15.     rules: CSSRuleList[對象] 

  16.     title: null 

  17.     type: "text/css" 

  18. */  

  19.   

  20. // 獲取媒體類型(media type)  

  21. console.log(document.styleSheets[0].media.mediaText)  

  22. /* 

  23. 返回值可能是: 

  24.     "all" 或者 "print" 或者是其他應用到此樣式表的 media 

  25. */  

在各種情況下,你肯定都有辦法來獲取到要添加規則的樣式表。

創建一個新樣式表

在許多情況下,最好的方法可能是創建一個新的 <style> 元素來存放這些動態規則。這也很簡單:

[javascript] view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. var sheet = (function() {  

  2.     // 創建 <style> 標簽  

  3.     var style = document.createElement("style");  

  4.   

  5.     // 可以添加一個媒體(/媒體查詢,media query)屬性  

  6.     // style.setAttribute("media", "screen")  

  7.     // style.setAttribute("media", "only screen and (max-width : 1024px)")  

  8.   

  9.     // 對WebKit hack :(  

  10.     style.appendChild(document.createTextNode(""));  

  11.   

  12.   

  13.     // 將 <style> 元素加到頁面中  

  14.     document.head.appendChild(style);  

  15.   

  16.     return style.sheet;  

  17. })();  

悲劇的是WebKit需要一點hack手段才能正確創建,但我們只需要關心這個sheet。

插入規則

在早期版本的IE中 Stylesheets 的 insertRule方法并不可用,雖然現在這是規則注入的標準。insertRule 方法需要編寫整個CSS規則,和在樣式表中是一樣的寫法:

[javascript] view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. sheet.insertRule("header { float: left; opacity: 0.8; }", 1);  

這 個JavaScript API方法雖然看起來有點土,但它確實就是這樣運行的。第二個參數 index 表示要插入規則的位置(索引)。這也是非常有用的,這樣你就可以插入同樣的規則/代碼,這可以讓靠后的規則生效。默認的index是 -1 ,代表整個集合的末尾。如果想要有額外的/懶惰控制規則,你也可以添加 !important 標記到某條規則后,以避免索引的問題。

添加規則 —— 非標準的 addRule 方法

CSSStyleSheet 對象有一個 addRule 方法,允許你注冊CSS規則到樣式表中。 addRule 方法接受三個參數: 第一個參數是選擇器(selector)、第二個參數是CSS規則代碼, 第三個則是從0開始的整數索引,表示樣式的位置(在同一個選擇器中):

[javascript] view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. sheet.addRule("#myList li", "float: left; background: red !important;", 1);  

addRule方法的返回值總是 -1,所以這個值并沒有什么實際意義.
記住,這種方式的優點在于,從頁面添加的元素自動擁有了應用于他們的樣式,也就是說你不必將它們添加到具體的元素上,而是直接注入到頁面中。當然效率更高!

安全應用規則

因為并不是所有的瀏覽器都支持 insertRule 方法, 所以最好創建一個包裝函數來處理規則應用。下面是一個快速的土方法:

[javascript] view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. function addCSSRule(sheet, selector, rules, index) {  

  2.     if("insertRule" in sheet) {  

  3.         sheet.insertRule(selector + "{" + rules + "}", index);  

  4.     }  

  5.     else if("addRule" in sheet) {  

  6.         sheet.addRule(selector, rules, index);  

  7.     }  

  8. }  

  9.   

  10. // 使用方式  

  11. addCSSRule(document.styleSheets[0], "header", "float: left");  

這個工具方法應該涵蓋了新增style規則的所有情況。如果你擔心在應用中出錯, 那么應該將該方法的代碼用一個 try{} catch(e){} 塊包起來。

插入媒體查詢規則

媒體查詢規則的添加有兩種方式。第一個是使用標準 insertRule 方法:

[javascript] view plaincopy在CODE上查看代碼片派生到我的代碼片
  1. sheet.insertRule(  

  2.   "@media only screen and (max-width : 1140px) { header { display: none; } }"  

  3.   );  


當然,因為IE老版本不支持 insertRule,所以另一種方法就是創建一個 STYLE 元素,并指定適當的 media 屬性,然后將樣式添加到新的樣式表中。這可能需要使用多個 STYLE 元素,但也是很容易的。我可能會創建一個對象,指定媒體查詢以及索引,并那樣創建/獲取他們。

動態添加規則到樣式表是高效的手段,可能比你想象的還要簡單。請記住這種方案,可能在你的下一個大應用中需要使用,因為它能在代碼和元素處理這兩方面避免你掉進坑里。

原文鏈接: Add Rules to Stylesheets with JavaScript


標簽:

SEO教程網

猜你喜歡

發表評論

必填

選填

選填

必填,不填不讓過哦,嘻嘻。

記住我,下次回復時不用重新輸入個人信息

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

站長推薦的文章
瀏覽最多的文章
無覓相關文章插件,快速提升流量 体彩app官方网站