利用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	Y	N	Y
	CSS_2	Y	Y	Y	Y
Disabled (Attribute)	CSS_1	true	true	true	true
	CSS_2	null	null	null	null
Disabled (Property)	CSS_1	true	false	true	false
	CSS_2	false	false	false	false

結語：以上是我操做樣式的一種思路，固然還有其餘方法，歡迎你們交流。更多關於disabled的知識能夠查看一下連接：

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