JavaScript修改CSS样式的三种方式及全局样式切换

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"。

 
<link rel="stylesheet" type="text/css" id="css" href="firefox.css" />

在JavaScript调用时，逻辑较为简单，只需动态修改该link元素的href值即可。

 
<span onclick="javascript:document.getElementById('css').href='ie.css'">点我改变样式</span>