利用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属性在浏览器中的支持情况：

conditionsIE(10)FirefoxChromeSafari

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/

原文地址：http://www.cnblogs.com/zivxiaowei/p/3438809.html