码迷,mamicode.com
首页 > 其他好文 > 详细

addclass

时间:2017-05-06 21:47:16      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:remove   位置   regex   参数   否则   script   bsp   断包   索引   

怎么用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 参数表示原有的样式名。

addclass

标签:remove   位置   regex   参数   否则   script   bsp   断包   索引   

原文地址:http://www.cnblogs.com/aivnfjgj/p/6818082.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!