一个网页可能用到多个外部样式表，在浏览器客户端如何动态的选择不同的外部样式表呢！
思路：导入到网页中的css文件被解析为sytelSheet对象。首先将要用到的css样式表都导入。然后利用document.styleSheets来获取所有的样式表(利用索引就可以访问单个的styleSheet对象)。设置styleSheet对象的disabled属性来禁用/启用某个sytelSheet对象。
css1.css文件代码:
body{ color:blue; }
css2.css文件代码
body{ color:red; }
html文件(给按钮绑定事件是用到jquery):
<html> <head> <link href="css1.css" mce_href="css1.css" rel="stylesheet" type="text/css"> <link href="css2.css" mce_href="css2.css" rel="stylesheet" type="text/css"> <mce:script type="text/javascript" src="jquery-1.5.1.min.js" mce_src="jquery-1.5.1.min.js"></mce:script> <mce:script type="text/javascript"><!-- var blueCss=document.styleSheets[0]; var redCss=document.styleSheets[1]; redCss.disabled=true; $(function(){ $("button").eq(0).click(function(){ redCss.disabled=true; blueCss.disabled=false; }).end().eq(1).click(function(){ blueCss.disabled=true; redCss.disabled=false; }) }) // --></mce:script> </head> <body> asdfasd; <button>blue</button> <button>red</button> </body> </html>
咋代码里多了这么过:mce:和mce_什么的，复制的话点击上面的copy to clipboard赋值出来的东西是oK的
