请教高手： 如何同时加载多个关联的CSS文件 50分

我的javascript代码如下：
<SCRIPT LANGUAGE=javascript>
<!--
  // 字型及文字大小设置
function ff_change() { skin.href = document.getElementById('ff').value; }
function fs_change() { skin.href = document.getElementById('fs').value; }
//-->
</SCRIPT>我的html代码如下
<select onchange="ff_change(this.value)" name="ff" id="ff">
<option value="songti.css" selected>文字型式</option>
<option value="kaiti.css">楷体</option>
<option value="heiti.css">黑体</option>
</select>
<select onchange="fs_change(this.value)" name="fs" id="fs">
<option value="14px.css" selected>文字大小</option>
<option value="20px.css">20px</option>
<option value="26px.css">26px</option>
</select>
存在的问题是：当读者选择了黑体样式文件时，再加载文字大小文件，则字型样式又复原了。怎么样才能保持读者先选择的字型样式同时又加载文字大小样式。
请求高手指教。

解决方案 »

  1.   

    try:
    function getStyle( url )
    {
       var stl = document.createElement( "link" );
       stl.type = "text/css";
       stl.href = url;
       document.head.appendChild( stl );
    }function ff_change() { getStyle( document.getElementById('ff').value ); }
    function fs_change() { getStyle( document.getElementById('fs').value ); }
      

  2.   

    我试验了一下，楼上仁兄的代码没成功，下面贴出来：
    <HTML>
    <HEAD>
    <link ID="skin" rel="stylesheet" type="text/css">
    <TITLE>换肤技术</TITLE>
    <SCRIPT LANGUAGE=javascript>
    <!--
    function getStyle( url )
    {
    var stl = document.createElement( "link" );
    stl.type = "text/css";
    stl.href = url;
    document.head.appendChild( stl );
    }
    function ff_change() {getStyle( document.getElementById('ff').value ); }
    //-->
    </SCRIPT>
    </HEAD>
    <BODY>
    <P>请选择下面的下拉菜单测试更换字体的效果</P>
    <br><DIV id=appearance>
    <select onchange="ff_change(this.value)" name="ff" id="ff">
    <option value="kaiti.css">楷体</option>
    <option value="heiti.css">黑体</option>
    </select>
    </DIV>
    </BODY>
    </HTML>以下是样式表
    kaiti.css 样式文件
    body { font-family: 楷体_GB2312;｝
    heiti.css 样式文件
    body { font-family: 黑体;}
      

  3.   

    你动态改变样式不一定非得通过加载样式表来做，在一个样式表中定义多个class也是可以的
    <style>
    .fsong{font-family:"宋体";}
    .fkaiti{font-family:"楷体";}
    .fheiti{font-family:"黑体";}
    .f14{font-size:14px;}
    .f20{font-size:20px;}
    .f26{font-size:26px;}
    </style>
    <body>
    我的html代码如下
    <select onchange="changeF()" name="ff" id="ff">
    <option value="fsong" selected>文字型式</option>
    <option value="fkaiti">楷体</option>
    <option value="fheiti">黑体</option>
    </select>
    <select onchange="changeF()" name="fs" id="fs">
    <option value="f14" selected>文字大小</option>
    <option value="f20">20px</option>
    <option value="f26">26px</option>
    </select>
    <script language="javascript">
    <!--
    // 字型及文字大小设置
    var ff = document.getElementById('ff');
    var fs = document.getElementById('fs');
    function changeF(){document.body.className = ff.value + " " + fs.value}
    //-->
    </script>
    </body>
      

  4.   

    是这样的，我的网站属于小说阅读类型，文章内容很长，如果读者长时间面对屏幕对眼睛不好，因此需要调整网页的文字前景和背景，另外我的读者有相当的老年人，眼睛不好，文字小了看不清。总之，必须能够改变网页界面。 
     我也曾经试过完全采用javascript在客户端设置网页界面，但对于较复杂的网页结构，包含表格超链接图片，如何保证表格不变形，超链接颜色与文字颜色相匹配，选用与背景相衬的图片，这些问题在一个样式表中定义多个class就不能胜任了。因此动态加载CSS文件实属必不得已。
      我在一楼贴出的代码确实能够实现加载css，但是加载了字体样式文件后，再选择背景样式时，原加载的字体全又复原了。这我就不知道怎么办了。请求高手继续指教。
      

  5.   

    有了，我一开始给你那段，修改一个函数即可：function getStyle( url )
    {
       var oStyleSheet=document.styleSheets[document.styleSheets.length-1];
       oStyleSheet.addImport( url );
    }
      

  6.   

    怎么的，IE浏览器提示：下面的这行代码不支持此属性和方法   var oStyleSheet=document.styleSheets[document.styleSheets.length-1];
      

  7.   

    难道你一个<link或者<style也没放到HTML中？
      

  8.   

    你在包含getStyle这个函数的<script前加上一个<style></style>什么东西都不写也无所谓。
      

  9.   

    如楼上所言，在 <script 前加上一个<style></style> 再试验，确实成功。万万感谢！Thanks！
      

  10.   

    唉呀呀……，我把分全给了Amwpfiqvy(中午要睡觉)，忘记了分一些与ice_berg16(寻梦的稻草人)朋友。虽然他的代码不合我的要求，但热心可见。只能口头谢谢了。再见……
      

  11.   

    回Amwpfiqvy(中午要睡觉) ：
      你好，你的代码我发现在IE浏览器下可以，但是在firefox，netscspe下就不兼容了，请问还有没有好的能够兼容的方法。