利用link标簽的disabed屬性大面積的對其他标簽元素的CSS樣式進行替換操作

　　由于平時對元素樣式的控制基本上隻是3，4個，是以一般用Jquery的時候直接使用$(element).css();這個方法，或者使用$(element).addClass()方法完成樣式操作。對于小範圍元素的操作來說，這是非常友善的。但是當針對衆多元素同時進行操作的時候呢，這2個方法讓代碼看起來就比較重量級了，代碼的可讀性也比較小。

　　過程起初，我先嘗試了一種方式，就是在JS代碼中動态插入link标簽，引入新的樣式文，但是很遺憾的是根本就不起作用，因為那個時候浏覽器已經把樣式渲染到頁面元素了，新引入的樣式檔案根本就不會被浏覽器執行渲染。是以我選擇了另外一種方式，就是把2個樣式檔案同時先加載完畢，然後先禁用其中一個檔案，等到在需要出現的時候，利用JS代碼控制其啟用，進而達到整體控制。

HTML代碼片段：

<link href="/public/stylesheets/page/application/first.css" rel="stylesheet" type="text/css">
<link id="second_css" disabled="true" href="/public/stylesheets/page/application/second.css" rel="stylesheet" type="text/css">      

　　代碼中我用了2個link标簽，注意看到第二個link标簽中我添加了ID屬性和disabled這2個屬性。ID當時是用于JS便于操控，disabled用于在需要的時候取消禁用，需要的時候啟動禁用，進而覆寫原有樣式。由于在實際開發中，我的第一個樣式檔案中包含了其他許多不需要被大面積操作元素的樣式，是以在操作的時候我并沒有采用這種思路：

采用first.css檔案 —>禁用second.css檔案

或者

采用second.css檔案—>禁用first.css檔案

而是

　　我在second.css檔案中，把樣式屬性值都添加了!important 屬性值，進而增加其顯示的優先級，達到覆寫first.css檔案中的樣式。也就是單獨的隻對second.css的樣式檔案進行操作，當然你也可以純粹的對2個檔案進行直接操作，不需要在第二個樣式檔案中添加!important達到覆寫，

second.css代碼片段：

.top {
    position: fixed !important;
    background: #FFF !important;
}

.logo {
    background:url(/public/images/page/index/mini_logo.png) !important;
}      

 下面看看JS代碼片段：

//禁用樣式檔案
$(element).attr("disabled","true");    
//啟用樣式檔案    
$(element).attr("disabled","false");          

 以上方法我在IE8和chrome測試通過。下圖是一張disabled屬性在浏覽器中的支援情況：

conditions	IE(10)	Firefox	Chrome	Safari
load	CSS_1	Y		N
CSS_2
Disabled (Attribute)		true
	null
(Property)			false

結語：以上是我操作樣式的一種思路，當然還有其他方法，歡迎大家交流。更多關于disabled的知識可以檢視一下連結：

http://www.ibm.com/developerworks/cn/web/1309_hanjz_htmldisable/

作者：Ziv小威

出處：http://imziv.com/

關于作者：專注于Java技術的程式員一枚，此外對JS開發保持着較高的興趣。愛好音樂，閱讀，FM等等。

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接。

如有問題，可以郵件：[email protected]

微網誌：Ziv小威