几个关于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: className, CSS, DOM, javascript
文章字体大小:
One Response to “几个关于class的Javascript函数”
Leave a Reply
四月 2nd, 2008 at 11:11 上午
突然对编程厌倦了……