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

几个关于class的Javascript函数

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就无能为力了。复杂的情况如下:


这要求对class里面的内容进行分解合成。因此可以用上面的函数。
用法:
前提条件:var obj=document.getElementById(”test”);
1、添加一个定义为”item-padding”的className

addClass("item-padding",obj);
//result


2、把”item-hover”从中删除

removeClass("item-hover",obj);
//result


3、查看”item-red”是否已存在其中

alert(matchClass("item-red",getClassName(obj)));
//result true

  有人认为简单的一个obj.className.replace(value,”")就可以实现removeClass()了,但在本例中的话,

obj.className.replace("item","");
//的结果就不那么好了:

关于setClassName()的讨论
有人说应该这样

obj.getAttribute('className')// only works in IE but not FF whereas
obj.getAttribute('class')// works in FF but not IE.

其实只要一个obj.className=value就完全OK了。

  为什么?因为class是javascript的关键字,所以通常把class改为className,即obj.className,而对obj.setAttribute()的话,在IE(IE6- ?)中始终还是只有”className”这个属性,所以就出现了上面的情况。这里有一个英文解释,具体在3楼。而且从MSDN的ms533560(VS.85)页可以看到:

CLASS Attribute | className Property

Syntax

HTML <ELEMENT CLASS = sClass… >
Scripting [ sClass = ] object.className

说明正统的应该是

obj.setAttribute("class",value);
//和
obj.className=value;

而在Prototype.js和YUI中,人们都发现他们用的都是className Property,连权威都这样了,所以大家不要再执着setAttribute()了,马上改用className Property吧:
obj.className=value;
实践加权威的就是最有力的证明!

Update:偶然间发现,定义变量getClass会在Firefox1.8.2中出现错误:”redeclaration of const getClass”,所以改名为getClassName,同时相应的改setClass为setClassName。

Popularity: 52% [?]

 tags Tags: , , ,

commentsOne Response to “几个关于class的Javascript函数”

  1. mercy Says:

    突然对编程厌倦了……

respondLeave a Reply

:mrgreen: :| :twisted: :arrow: 8O :) :? 8) :evil: :D :idea: :oops: :P :roll: ;) :cry: :o :lol: :x :( :!: :?:

&| &amp;