利用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/