博客

导读：

　　这里说的动态加载是指加载外部CSS文件和动态创建样式表元素，在这里我总结的方法可能不全，但是尽量希望能把自己在使用的过程当中用到的一些方法提供给大家。

　　
首先来说如何动态加载一个外部的CSS文件：(假设文件名为style.css)

　　最没有技术含量的方法：

　　document.write(” rel=”stylesheet” type=”text/css”, href=”style.css”>”);

　　@import(style.css)

　　这种方法只能用在外部CSS文件或style结点中，基本上不能算作是动态。在FF和IE中均可行。

　　使用document.createStyleSheet()方法

　　这个方法是IE only的，参数可以传递一个样式表中的值，如body{background: blue;}或者是一个外部CSS文件的URL，使用方法如document.createStyleSheet(style.css)，此URL的地址相对于当前页面。

　　动态创建link结点

　　function LoadCss(cssUrl) {

　　? var link = document.createElement(“link”);

　　? link.rel = “stylesheet”;

　　? link.type = “text/css”;

　　? link.href = “cssUrl”;

　　? document.getElementsByTagName(“body”).item(0).appednChild(link);

　　}

　　这个方法在FF和IE中均可以使用，当然同样的思路还可以来创建style结点，然后使用XMLHttpRequest方法来加载cssURL中的内容，并把创建的style结点的innerHTML设置成XMLHttpRequest的responseText，但由于我认为这是最不经济、最不合理的一种方法，所以在这也就不讲了。

　　更新当前某个link结点

　　思路同上，但是这种作法是替换掉一个已有的link标签，可以用于更换网站的Theme，基本代码如下：

　　function ChangeTheme(cssUrl) {

　　? var theme = document.getElementByName(“theme”); //假设存在id为theme的结点

　　? theme.href = cssUrl;

　　}

　　这种方法我测试过，在FF和IE中均可行。

　　
动态创建样式元素

　　如果我想在网页上增加一个如下的CSS元素，应该怎么做呢？

　　.focus {

　　? color: red;

　　? font-style: bold;

　　}

　　当然，我可以创建一个style结点，然后把上面这段内容放到innerHTML中，那有没有别的办法呢？到目前为止，我还不知道除了上面那个方法以处一个在FF和IE中均可行的方法。不过在IE中我们可以这样做：

　　var sheet = document.createStyleSheet();

　　sheet.addRule(“.focus”, “color: red; font-style: bold;”);

　　文章中如有不对的地方，欢迎大家给我指正。

本文转自

http://bbiao.spaces.live.com/blog/cns!c201294984baf810!602.entry