JavaScript动态切换CSS样式表的实现方法

JavaScript动态切换CSS样式表的实现方法

首先，在引用样式表的元素中定义一个唯一的ID，例如：

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

此处将ID设置为“css”。

接下来，编写一个JavaScript函数，代码如下：

<script type="text/javascript">
function change(a){
var css=document.getElementById("css");
if (a==1)
css.setAttribute("href","1.css");
if (a==2)
css.setAttribute("href","2.css");
}  
</script>

该函数的代码可以放置在页面的任意位置。

最后，为改变页面样式表的链接添加触发事件的函数调用，代码如下：

<a href="#" onClick="change(1)">1.css</a>
<a href="#" onClick="change(2)">2.css</a>

该效果已在IE和Firefox浏览器中测试通过。相信读者阅读后能清楚理解，利用此方法可以让浏览者自行选择所需的样式表，例如视力不佳的用户可以选择字体较大的样式。这里有两点需要注意：

第一，此例中function后的函数名不能命名为links或link，否则样式表将无法更改，具体原因不明，可能是JavaScript的保留字符所致。

第二，如果需要改变整个页面的样式，必须在样式表文件中将body的高度定义为100%。