动态加载css文件有很多种方式，但对于简单的方式来说，我们可以直接创建一个link标签并且放到head中。比如以下代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="jquery.js"></script> 7 <script type="text/javascript"> 8 $(function() { 9 $('#test').click(function() { 10 $('<link id="skin" rel="stylesheet" type="text/css" />') 11 .attr('href', 'resources/css/neter.css') 12 .appendTo($('head').get(0)); 13 14 return false; 15 }); 16 }); 17 </script> 18 </head> 19 <body> 20 <input type="button" id="test" name="test" value="Load Css" /> 21 </body> 22 </html>
以上代码看起来没问题，在Firefox下测试也不会有问题，但在XP下的IE8下测试会导致以下错误：
单击确定后会显示如下：
经过测试可以将加载css文件的语句改为如下写法：
1 $('<link id="skin" rel="stylesheet" type="text/css" />') 2 .appendTo($('head').get(0)) 3 .attr('href', 'resources/css/neter.css');