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

一.动态创建link方式

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

function addCssByLink(url){
	var doc=document;
	var link=doc.createElement("link");
	link.setAttribute("rel", "stylesheet");
    link.setAttribute("type", "text/css");
    link.setAttribute("href", url);

	var heads = doc.getElementsByTagName("head");
	if(heads.length)
		heads[0].appendChild(link);
	else
		doc.documentElement.appendChild(link);
}

二.动态创建style方式

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

function addCssByStyle(cssString){
	var doc=document;
	var style=doc.createElement("style");
	style.setAttribute("type", "text/css");

	if(style.styleSheet){// IE
		style.styleSheet.cssText = cssString;
	} else {// w3c
		var cssText = doc.createTextNode(cssString);
		style.appendChild(cssText);
	}

	var heads = doc.getElementsByTagName("head");
	if(heads.length)
		heads[0].appendChild(style);
	else
		doc.documentElement.appendChild(style);
}

 

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

 

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

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

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

var createLabel = function(id, name, value) {

    var label_var = document.createElement("label");

 

    var label_id = document.createAttribute("id");

    label_id.nodeValue = id;

 

    var label_text = document.createTextNode(value);

 

    label_var.setAttributeNode(label_id);

    var label_css = document.createAttribute("class");

    label_css.nodeValue = "select_css";

    label_var.setAttributeNode(label_css);

    label_var.appendChild(label_text);

 

    return label_var;

}

 

 

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

//定义方法创建input标签（主要为Text）

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

//   名称（name），值（value），类型（type）

//  绑定Input方法事件，绑定方式如下（可以同时绑定多个事件方法）：

//  "onchange==alert('This Value is change success !');|onblur==alert('This value is the beautiful one !');"

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

var createInput = function(id, name, value, type, width, height, event) {

    var var_input = null;

    var input_event_attr_IE = "";

    if (event != null && event != "") {

        var event_array_IE = event.toString().split('|');

        for (var i = 0; i < event_array_IE.length; i++) {

       &nbs