js使用js的CreateElement方法创建元素、样式表动态引入

一.动态创建link方式

我们可以使用link的方式.如下代码所示.

function addCssByLink(url){var doc&＃61;document;var link&＃61;doc.createElement("link");link.setAttribute("rel", "stylesheet");link.setAttribute("type", "text/css");link.setAttribute("href", url);var heads &＃61; doc.getElementsByTagName("head");if(heads.length)heads[0].appendChild(link);elsedoc.documentElement.appendChild(link);
}

二.动态创建style方式

但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等待上一段下载时间,所以,Firebug Lite采取的是将css代码写在js中,然后动态创建style标签的方法,正如下面所示

function addCssByStyle(cssString){var doc&＃61;document;var style&＃61;doc.createElement("style");style.setAttribute("type", "text/css");if(style.styleSheet){// IEstyle.styleSheet.cssText &＃61; cssString;} else {// w3cvar cssText &＃61; doc.createTextNode(cssString);style.appendChild(cssText);}var heads &＃61; doc.getElementsByTagName("head");if(heads.length)heads[0].appendChild(style);elsedoc.documentElement.appendChild(style);
}

这样的话,如果是较少的代码,可以比较方便的实现到动态加载css的效果,但是如果为了方便维护和管理,并没有等待时间限制,使用link方式更加合适

//*************************************//

//定义方法创建一个label标签

//*************************************//

var createLabel &＃61; function(id, name, value) {

    var label_var &＃61; document.createElement("label");

    var label_id &＃61; document.createAttribute("id");

    label_id.nodeValue &＃61; id;

    var label_text &＃61; document.createTextNode(value);

    label_var.setAttributeNode(label_id);

    var label_css &＃61; document.createAttribute("class");

    label_css.nodeValue &＃61; "select_css";

    label_var.setAttributeNode(label_css);

    label_var.appendChild(label_text);

    return label_var;

}

//*************************************//

//定义方法创建input标签&＃xff08;主要为Text&＃xff09;

//id,name,value,type 分别代表创建标签的id,

//   名称&＃xff08;name&＃xff09;&＃xff0c;值&＃xff08;value&＃xff09;&＃xff0c;类型&＃xff08;type&＃xff09;

//  绑定Input方法事件&＃xff0c;绑定方式如下&＃xff08;可以同时绑定多个事件方法&＃xff09;&＃xff1a;

//  "οnchange&＃61;&＃61;alert(&＃39;This Value is change success !&＃39;);|οnblur&＃61;&＃61;alert(&＃39;This value is the beautiful one !&＃39;);"

//*************************************//

var createInput &＃61; function(id, name, value, type, width, height, event) {

    var var_input &＃61; null;

    var input_event_attr_IE &＃61; "";

    if (event !&＃61; null && event !&＃61; "") {

        var event_array_IE &＃61; event.toString().split(&＃39;|&＃39;);

        for (var i &＃61; 0; i

            var event_IE &＃61; event_array_IE[i].split(&＃39;&＃61;&＃61;&＃39;);

            input_event_attr_IE &＃43;&＃61; " " &＃43; event_IE[0] &＃43; "&＃61;&＃39;&＃39; ";

        }

    }

    try {//定义变量实现IE6.0和IE7.0兼容。

        var_input &＃61; document.createElement("");

    } catch (e) {

        var_input &＃61; document.createElement("input");

    }

    var input_id &＃61; document.createAttribute("id");

    input_id.nodeValue &＃61; id;

    var input_name &＃61; document.createAttribute("name");

    input_name.nodeValue &＃61; name;

    var input_type &＃61; document.createAttribute("type");

    input_type.nodeValue &＃61; type;

    var input_value &＃61; document.createAttribute("value");

    input_value.nodeValue &＃61; value;

    var input_style &＃61; document.createAttribute("style");

    var input_style_str &＃61; "";

    if (width !&＃61; null && width !&＃61; "") {

        input_style_str &＃43;&＃61; "width:" &＃43; width &＃43; "px;";

    } else {

        input_style_str &＃43;&＃61; "width:30px;";

    }

    if (height !&＃61; null && height !&＃61; "") {

        input_style_str &＃43;&＃61; "height:" &＃43; height &＃43; "px;";

    }

    if (event !&＃61; null && event !&＃61; "") {

        var event_array &＃61; event.toString().split(&＃39;|&＃39;);

        for (var i &＃61; 0; i

            var events &＃61; event_array[i].split(&＃39;&＃61;&＃61;&＃39;);

            var input_event &＃61; document.createAttribute(events[0]);

            input_event.nodeValue &＃61; events[1];

            var_input.setAttributeNode(input_event);

        }

    }

    var_input.setAttributeNode(input_type);

    input_style.nodeValue &＃61; input_style_str;

    try {

        var_input.setAttributeNode(input_style);

    } catch (e) {

        width &＃61; (width &＃61;&＃61; null || width &＃61;&＃61; "") ? "30" : width;

        var_input.setAttribute("width", width);

        if (height !&＃61; null && height !&＃61; "") {

            var_input.setAttribute("height", height);

        }

    }

//    if (readonly !&＃61; "") {

//        var input_readonly &＃61; document.createAttribute("readonly");

//        input_readonly.nodeValue &＃61; "readonly";

//        var_input.setAttributeNode(input_readonly);

//    }

    var_input.setAttributeNode(input_id);

    var_input.setAttributeNode(input_name);

    var_input.setAttributeNode(input_value);

    return var_input;

}

//******************************************************************//

//定义方法创建一个Select选择框的标签&＃xff1b;

//*****   id   表示标签的标识id

//*****   name 表示标签的名称name

//*****   options表示标签要绑定的选择项&＃xff08;例如&＃xff1a;"0231A563-专业类服务|02312177-维保类服务|……")

//*****   splitstr表示用来分割options的字符&＃xff08;如&＃xff1a;&＃39;|&＃39;)

//*****   splitchar表示分割键值对的分隔符&＃xff08;如&＃xff1a;&＃39;-&＃39;&＃xff09;

//*****   event 表示此标签对应的事件&＃xff08;当event&＃61;&＃61;null时此标签不绑定事件&＃xff09;

//******************************************************************//

var createSelect &＃61; function(id, name, options, splitstr, splitchar, event, selectedValue) {

    var var_select &＃61; null;

    try {//处理IE6.0和IE7.0的兼容问题。

        var_select &＃61; document.createElement("");

    } catch (e) {

        var_select &＃61; document.createElement("select");

    }

 

    var select_id &＃61; document.createAttribute("id");

    select_id.nodeValue &＃61; id;

    var select_name &＃61; document.createAttribute("name");

    select_name.nodeValue &＃61; name;

 

    if (event !&＃61; null && event !&＃61; undefined && event !&＃61; "") {

        var select_change &＃61; document.createAttribute("onchange");

        select_change.nodeValue &＃61; event;

        var_select.setAttributeNode(select_change);

    }

    var_select.setAttributeNode(select_id);

    var_select.setAttributeNode(select_name);

    try {

        var_select.setAttribute("width", "100px");

    } catch (e) {

        var select_css &＃61; document.createAttribute("class");

        select_css.nodeValue &＃61; "select_css";

        var_select.setAttributeNode(select_css);

    }

 

    splitstr &＃61; (splitstr &＃61;&＃61; "" || splitstr &＃61;&＃61; null) ? "|" : splitstr;

    splitchar &＃61; (splitchar &＃61;&＃61; "" || splitchar &＃61;&＃61; null) ? "-" : splitchar;

 

    if (options !&＃61; null && options !&＃61; undefined && options.toString() !&＃61; "") {

        options &＃61; (options.toString().lastIndexOf(splitstr) &＃43; 1 &＃61;&＃61; options.toString().length) ? options.toString().substr(0, options.toString().length - 1) : options;

        var arrayOption &＃61; options.toString().split(splitstr);

        for (var i &＃61; 0; i

            var temp_value &＃61; arrayOption[i].split(splitchar);

            var option &＃61; document.createElement("option");

            var option_value &＃61; document.createAttribute("value");

            option_value.nodeValue &＃61; temp_value[0];

            var option_text &＃61; document.createTextNode(temp_value[1]);

            option.setAttributeNode(option_value);

            option.appendChild(option_text);

 

            var_select.appendChild(option);

            if (selectedValue !&＃61; null && selectedValue !&＃61; "") {

                if (temp_value[0] &＃61;&＃61; selectedValue || temp_value[1] &＃61;&＃61; selectedValue) {

                    var_select.options[i].selected &＃61; true;

                }

            }

        }

    }

    return var_select;

}

 

//***************************************************//

//定义方法创建一个标签&＃xff1b;

//*****   id表示标签唯一表示id

//*****   name表示标签的名称name

//*****   value表示标签对应显示的文字&＃xff08;名称&＃xff09;

//*****   event表示标签对应的事件&＃xff08;当event&＃61;&＃61;null时事件不绑定&＃xff09;

//*****   href表示标签的链接属性

//***************************************************//

var createA &＃61; function(id, name, value, event, href, target) {

    var var_a &＃61; null;

    try {

        var_a &＃61; document.createElement("");  //这里创建必须为""这种形式来创建否者不支持IE6.0和IE7.0

    } catch (e) {

        var_a &＃61; document.createElement("a");

    }

    var a_id &＃61; document.createAttribute("id");

    a_id.nodeValue &＃61; id;

    var a_name &＃61; document.createAttribute("name");

    a_name.nodeValue &＃61; name;

    href &＃61; (href &＃61;&＃61; null || href &＃61;&＃61; "") ? ("Javascript:void(0);" || "#") : href;

    var a_href &＃61; document.createAttribute("href");

    a_href.nodeValue &＃61; href;

 

    var a_Text &＃61; document.createTextNode(value);

 

    var_a.setAttributeNode(a_href);

    var_a.setAttributeNode(a_id);

    var_a.setAttributeNode(a_name);

    if (target !&＃61; null) {

        var target_href &＃61; document.createAttribute("target");

        target_href.nodeValue &＃61; "_blank";

        var_a.setAttributeNode(target_href);

    }

 

    if (event !&＃61; "" && event !&＃61; null && event !&＃61; undefined) {

        var a_click &＃61; document.createAttribute("onclick");

        a_click.nodeValue &＃61; event;

        var_a.setAttributeNode(a_click);

    }

    var_a.appendChild(a_Text); //注意这个值绑定顺序&＃xff0c;只能放在最后去绑定&＃xff08;不然不支持IE6.0和IE7.0&＃xff09;

 

    return var_a;

}

 

 

//******************************************//

//定义方法判断输入值是否为数字&＃xff1b;

//*******   当flag&＃61;true时判断输入值是否为整数&＃xff1b;

//******************************************//

var check_Is_Num &＃61; function(obj, flag) {

    var flag_var &＃61; false;

    var num &＃61; /^\d&＃43;$/; ///^\&＃43;?[1-9][0-9]*$/;

    //flag_var &＃61; /^(([0-9]&＃43;\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]&＃43;)|([0-9]*[1-9][0-9]*))$/.test(obj);

    flag_var &＃61; /^\d&＃43;(\.\d&＃43;)?$/.test(obj);

    if (flag) {

        flag_var &＃61; num.test(obj);

    }

    return flag_var;

}

 

//定义方法删除节点。

var removeRowItem &＃61; function(obj) {

    var rowTr &＃61; obj.parentNode.parentNode;

    try {

        rowTr.removeNode(true);

    } catch (e) {

        rowTr.parentNode.removeChild(rowTr);

    }

}

 

String.prototype.Trim &＃61; function() {

    return this.replace(/(^\s*)|(\s*$)/g, "");

}

转:https://my.oschina.net/u/3647620/blog/1552585

• js
• python
• function
• css
• text
• get
• 文件
• http
• 服务器

写下你的评论吧 !

吐个槽吧,看都看了

会员登录 | 用户注册