冷云

动态加载css

  1. 加载远程css文件

    function loadStyles(url){
	var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}

  2. 使用<style>元素来包含嵌入式 CSS

    function loadStyleString(css){
	var style = document.createElement("style");
    style.type = "text/css";
    try{
    	style.appendChild(document.createTextNode(css));
    } catch (ex){
    	style.textContent = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}
loadStyleString("body{background-color:red}");

    IE 将<style>视为一个特殊的、与<script>类似的节点，不允许访问其子节点访问元素的 styleSheet 属性，该属性又有一个 cssText 属性，可以接受 CSS 代码

与动态加载js的区别

  1. 对于动态加载js而言，我们创建出来的script标签最后插入到文档的时候你可以插入到任何位置。但是对于加载css而言要么使用link标签要么使用style标签，虽然可以把创建出来的标签放到文档的任何位置，但为了兼容所有浏览器link标签和style标签放到head当中。
  2. 对于动态加载js而言，我们创建出来的标签都是script标签。动态加载远程css使用link标签，动态创建本地样式使用style标签。
  3. 对于动态加载js而言，加载完成的js运行完成之后，相关的事件就已经执行完成，换句话说这个js文件已经没有用了。即使把插入的js标签删掉对整个网页是没有影响的。但对于动态加载css而言就完全不一样了。浏览器对js的解析是靠js解释器来完成的。而对css的解析是靠浏览器的渲染器来完成的，这个渲染器是一个实时更新的机制。如果把新插入的link或者style标签删除的话，对应的样式也会被删除。
  4. 由于浏览器的渲染器是实时执行的，所以说如果你修改了link标签的harf属性这种修改也会被直接反应到页面上。网页换肤只需修改link上的harf属性即可。

注意：

  1. 动态加载的远程js，如果修改src属性等同于无效。有的浏览器会下载js但不执行。

  2. script标签的src属性可以加载任何后缀的文件。这时就有了动态加载js的两外一种思路。我们可以让scr指向一个动态文件地址，比如php文件jsp文件，然后浏览器会去请求这个文件，在这个文件上你可以进行一些动态操作。比如根据事件的不同返回字符串不一样，或者根据传递的cookies不同做一些判断。

如何判断css文件加载完成

对于动态加载js而言如果说你需要使用回调函数，那么说明你加载的一定是一个远程的js。动态加载css一样如果需要判断css加载完成，你加载的一定也是一个远程文件而且是link标签。link标签上也有 onload和onreadystate属性，他们对应的是一个要运行的函数，这个函数也会在css加载完成之后凋用，在调用的同时你可以拿到readystate属性。

← 动态和静态合集 →