动态改变外部的样式表

来源：互联网发布：网络平台广告收费标准编辑：程序博客网时间：2024/05/16 15:57

一个网页可能用到多个外部样式表，在浏览器客户端如何动态的选择不同的外部样式表呢！

思路：导入到网页中的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"></mce:script></head><body>asdfasd;<button>blue</button> <button>red</button></body></html>

咋代码里多了这么过:mce:和mce_什么的，复制的话点击上面的copy to clipboard赋值出来的东西是oK的