码迷,mamicode.com
首页 > Web开发 > 详细

js实现css、addClass、removeClass和toggleClass

时间:2015-11-10 10:42:33      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:

JQuery中获取CSS样式
css(name):访问第一匹配元素的样式属性
css(name,value):在所有匹配的元素中,设置一个样式属性的值
css(properties):把一个“名/值对”对象设置为所有匹配元素的样式属性
css(name,function(index,value)):在所有匹配的元素中,设置一个样式属性的值

Javascript中获取样式的值       

       function css(obj, attr, value) {
            switch (arguments.length) {
                case 2:
                    if (typeof arguments[1] == "object") {    //批量设置属性
                        for (var i in attr) obj.style[i] = attr[i]
                    }
                    else {    // 读取属性值
                        return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
                    }
                    break;
                case 3:
                    //设置属性
                    obj.style[attr] = value;
                    break;
                default:
                    return "";
            }
        }

采用这种方式同样实现了 JQuery的效果。

JQuery中有addClass,removeClass,toggleClass
addClass(class):为每个匹配的元素添加指定的类名
removeClass(class):从所有匹配的元素中删除全部或者指定的类
toggleClass(class):如果存在(不存在)就删除(添加)一个类

      function hasClass(obj, cls) {
            return obj.className.match(new RegExp((\\s|^) + cls + (\\s|$)));
        }

        function addClass(obj, cls) {
            if (!this.hasClass(obj, cls)) obj.className += " " + cls;
        }

        function removeClass(obj, cls) {
            if (hasClass(obj, cls)) {
                var reg = new RegExp((\\s|^) + cls + (\\s|$));
                obj.className = obj.className.replace(reg,  );
            }
        }

采用这种方式同样实现了 JQuery的效果。

js实现css、addClass、removeClass和toggleClass

标签:

原文地址:http://www.cnblogs.com/zhujiabin/p/4951935.html

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