本文介绍如何使用JavaScript动态切换页面CSS样式表。通过在link标签中定义ID，利用DOM方法修改href属性，并结合点击事件触发函数，实现用户自定义样式选择。文中还指出了函数命名需避开保留字及body高度设置等注意事项，兼容IE与Firefox浏览器。
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%。