addclass

怎么用JS写类似JQuery的addClass

首先你要知道两点：
一、标签class的脚本特性为className，就是说访问标签的class的时候，需要用element.className
二、class属性中包含多个class时是以空格隔开
流程：
1.取得现有className的值
2.判断是否已经包含待添加的class
  2.1 现有className和待添加的class两端加空格，记为spaceClassName与spaceClass（这样可以有效判断包含关系，直接判断的话思考下有什么问题）
  2.2 用indexOf判断spaceClassName是否包含spaceClass
3.如果包含，退出，否则继续
4.将className与class加空格连接并过滤掉重复的空格，得到newClassName
5.设置新的className值为newClassName

现在，自己写吧

 function addClass(elem,cls) {
        if (!elem.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'))) elem.className += " "+cls;
}

\\\\\\\\\\\\\\\

 

<script type="text/javascript">
        function addClass(obj,className){
            obj = document.getElementById(obj);
            objClass = obj.className;
            if(objClass.indexOf(className)=="-1"){
               alert(objClass); 
               obj.className += " " + className;
            }
        }
    </script>

addClass
描述: 为每个匹配的元素添加指定的样式类名
.addClass( className ),className为一个String字符串，为指定元素添加这个classname的类
.addClass( function(index, currentClass) )，这个函数返回一个或更多用空格隔开的要增加的样式名。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向匹配元素集合中的当前元素。

removeClass
描述: 移除集合中每个匹配元素上一个，多个或全部样式。
.removeClass( [className ] )，每个匹配元素移除的一个或多个用空格隔开的样式名。
.removeClass( function(index, class) )，这个函数，返回一个或多个将要被移除的样式名。index 参数表示在所有匹配元素的集合中当前元素的索引位置。class 参数表示原有的样式名。

1、.addClass(function(index,currentClass))

这个方法是通过函数为匹配的元素增加指定的类名，其中function(index,currentClass)必须返回一个或多个空格分隔的类名，其主要接受两个参数，index参数是为对象在这个集合中的索引值，currentClass参数为这个对象原行的类名。我们来看一个实列：

 <script type="text/javascript"> $(function(){ $("#addClass").click(function(){ $("div.demo li").addClass(function(index,currentClass){ var addedClass; if(currentClass == "") {//判断列表项初始类名是不是空字符串，如果是空就增加类名 addedClass = "item-" + (index+1);//定义类名 } return addedClass;//返回类名 }) return false; }); }); </script>  

上面代码所表示的是点击“addClass”按钮后，给div.demo中的列表项没定义类名的列表增加指定的类名。一起看看点击前后的对比图（Firebug对比图）

二、.removeClass([className])

.removeClass()其实跟前面的.addClass()用法是相对应的，只不过.addClass()用来增加类名，而.removeClass()是用来删除类名。.removeClass()也有两种使用方法：

1、.removeClass([className])

.removeClass([className])是用来删除匹配元素中的指定的类名或全部类名；而其中className是可选的，如果className选择了值，删除的将是这个指定的值，如果指定任何值，将删除所有的类名。如：

 <script type="text/javascript"> $(function(){ $("#addClass").click(function(){ //增加selected 和 highlight类名 $("div.demo li:last").addClass("selected highlight"); return false; }); $("#removeClass").click(function(){ //删除selected类名 $("div.demo li:last").removeClass("selected"); return false; }); }); </script> 

上面代码前一段是点击“addClass”按钮后给div.demo中列表项中最后一项增加“selected higlight”类名，而后一段代码就是点击“removeClass”按钮后将把刚才添加的“selected”类名删除去。效果如下所示：

如果将上面的代码后半部改一下：

 $("#removeClass").click(function(){ //删除selected类名 $("div.demo li:last").removeClass(); return false; });  

这样一来，就把前面新增加的类名就全部删除了。

2、.removeClass(function(index,currenClass))

这种方法是从匹配的元素中删除全部或者指定的类名，function(index,currenClass)函数必须返回一个或多个空格分隔的类名。这个函数也接受两个函数，其中index参数为对象在这个集合中的索引值，currentClass参数为这个对象原先的类名，其具体使用方法和前面介绍的.addClass(function(index,currentClass))类似。