由于平时对元素样式的控制基本上只是 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 属性在浏览器中的支持情况：

结语：以上是我操作样式的一种思路，当然还有其他方法，欢迎大家交流。更多关于 disabled 的知识可以查看一下链接：

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

最后修改于 2013-11-23