本文介绍JavaScript修改CSS样式的三种常用方法：直接修改style属性、更改className以及设置cssText。同时演示如何通过修改外链样式表的href值来实现网页模板风格的实时切换，涵盖局部元素样式调整与全局样式变更的具体代码实现。
JavaScript修改CSS样式的三种方法
在JavaScript中，修改元素样式主要有三种途径：直接操作style属性、更改className类名以及设置cssText属性。
通过更改className可以批量应用预设样式，例如：document.getElementById('obj').className="…"。
使用cssText可以一次性覆盖多个样式属性，例如：document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;"。
直接修改style属性中的特定值，如背景色，示例为：document.getElementById('obj').style.backgroundColor="#003366"。
若需实现全局样式的切换，可通过修改外链样式表路径实现。
通过外链样式表切换全局模板
另一种全局样式切换思路是修改外链样式表的href属性，从而实现网页模板风格的实时切换。
实施该方法时，首先需为<link>标签指定一个唯一的id属性，例如id="css"。
HTML结构代码如下：
<link rel="stylesheet" type="text/css" id="css" href="firefox.css" />在JavaScript调用时，逻辑较为简单，只需动态修改该link元素的href值即可。
具体HTML交互代码如下：
<span onclick="javascript:document.getElementById('css').href='ie.css'">点我改变样式</span>