动态加载js、css

巧了，最近刚好改造一个网页的样式，用js动态加载css文本，很方便的改造了网页的样式。而在打印的时候，看到了别人写的js，用来动态的加载js文件。其实不在于代码有多难，再于思路。记录一下。

动态加载js

其实code就是用来打印输出的code。

// 动态生成script标签
function loadScriptString(code) {
  var script = document.createElement("script"); //创建一个script标签
  script.type = "text/javascript";
  try {
    //IE浏览器认为script是特殊元素,不能再访问子节点;报错;
    script.appendChild(document.createTextNode(code));
  } catch (ex) {
    script.text = code;
  }
  document.getElementsByTagName("head")[0].appendChild(script);
}

其实，也能直接用方式

eval('alert(123);')。

其实差不多。

动态加载css样式

使用了jquery，用js也能完成。但是通过动态加载css样式，可以非常方便的更改网页的样式。

(function() {
    'use strict';
    var $ = window.$;
    //动态加载css样式，达到
    $('body').append('<style>.postbox{	width: 152px;float: left;}.postbox .entry h2  {	display: none;}.postmetadata{display: none;}.detail{	display: none;}  #sidebar {display: none;}  #home-left {width: 950px;} .myprice{text-align: center;font-size: 16px;}</style>');
    $('body').append('<p id="cur_goods" style="position: fixed;top: 80px;left: 200px;background-color:#eee;line-height:30px;font-size:20px;padding:10px;border:1px solid #888;border-radius: 5px;"></p>');
    $('.postbox .entry').each(function(){
        //console.log(this);
        var title = $(this).find('h2 a').text();
        var result = title.match(/\d+(\.\d+)?元/);
        var price = (result && result[0]) || '';
        $(this).append('<div class="myprice">'+price+'</div>');
    });//append('<span>222</span>');
    $('.postbox').hover(function(dom){
        var html = $(dom.currentTarget).find('h2 a').text();
        $('#cur_goods').text(html).css({left:dom.clientX,top:dom.clientY});
    });
})();