Front-end web developer——[to be a better man]
文章字体大小Font Size文章字体大小:12px, 14px

DOM

Jul 22

在Javascript前端编程中,使用过Prototype.js的人,会知道,只要使用一个简单的语句:

$("msg").hide();

就可以把id为msg的元素隐藏;同样的,$("msg").show()则可以把隐藏的元素显示出来。像这种对元素的扩展,是怎样做出来的呢?

在说明这个问题之前,先问一个问题:为什么要这样做?

为什么要对DOM element进行扩展?

如果你在Javascript编辑中,不使用任何库,即祼编去实现一些说大不大说小不小应用时,相信你一定会事先$一下:

var $=function (s){
return typeof(s)=="string" ? document.getElementById(s) : s;
};

或者更简单的

function $(){return document.getElementById(s);}

这样一来可以加快你写代码的速度,二来可以为页面节省不少字节。

但如果我们还需要很多对DOM的操作,而且这些操作具有一定的复杂性重用,需要分离出来,如对属性className的操作:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
rmCls=function(el,_c){// the full name is removeClassName
    el=$(el);if(!el) return null;
    var c=el.className.split(" "),str="";
    for(var i in c){if(c[i]!=_c) str+=" "+c[i];}
    el.className=str;
    return el;
},
adCls=function(el,c){// the full name is addClassName
    el=$(el);if(!el) return null;
    this.rmCls(el,c).className+=" "+c;
    return el;
},
hasCls=function(el,_c){// the full name is hasClassName
    var el=$(el),c=(el.className || "").split(" "), l=c.length;
    while(l--){if(c[l]==_c) return true;};
    return false;
};

当然,我们也可以直接使用$(”msg”).className=”on”来操作,但这对存在多个类名的元素来说就不那么便利了。但现在也不太便利,因为我们要把元素也写到参数中:
adCls($("msg"),"on");
如果可以这样似乎会更清爽些:
$("msg").adCls("on");
阅读全文(Read the rest of this entry) »

Popularity: 63% [?]

Apr 01
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/*
* Get the class string from the object
* @param object o the DOM object 
* @return string the class string of the object
*/
//var getClass=function(o){
var getClassName=function(o){
	return o.className;
}
/*
* Set the class string from the object
* @param string cls the class string to be set
* @param object o the DOM object where
* the class string to be set to
*/
//var setClass=function(o){
var setClassName=function(cls,o){
	o.className=cls;
}
/*
* Parse the classes list to array by split(" ")
* @param string cl a string of class or a list of classes
* @return array with the element of class name
*/
var getClassArray=function(cl){
	if(cl && typeof(cl)=="string")
	return cl.split(" ");
	else return cl;
}
/*
* If the class is listed in the classes list ,return true
* @param string cl a single class name 
* @param string cls class name list
* @return true if the class is listed 
* in the classes list.else return false.
*/
var matchClass=function(cl,cls){
	if(!cls) return false;
	cls= getClassArray(cls);
	for(var c in cls) if(cl==cls[c]) return true;
	return cl==cls;
}
/*
* remove one of the classes from the object
* @param string cl a single class name 
* @param string cls class name list
*/
var removeClass=function(cl,o){
	var cls=getClassArray(getClassName(o));
	var _cls="";
	for(var i in cls) if (cl!=cls[i]) _cls+=" "+cls[i];
	setClassName(_cls,o);
}
/*
* add a class to the object
* @param string cl a single class name 
* @param object o the DOM object
* where the class string to be ADD to
*/
var addClass=function(cl,o){
	removeClass(cl,o);
	setClassName(getClassName(o)+" "+cl,o);
}

  上面几个函数,相信很多人早就写过不少,在这里我仅为总结一下经验,也希望有点价值。
  通常,在xhtml中标签改变class的值,只要

obj.className=stringValue

  这是对付简单的情况。当一个元素中已经有多个class时,一个简单的obj.className=stringValue就无能为力了。 阅读全文(Read the rest of this entry) »

Popularity: 51% [?]