js实现css、addClass、removeClass和toggleClass

<span style="font-size:14px;line-height:2;">    jq给了操作dom很大的便利，但是没有jq怎么办，jq所有的方法都是来自原生js的封装，所以js也是能实现的，具体的应该去看jq的源代码，今天用到了这几个就先记一下，也是很常用的。</span> 

----------------------------------------------------------------------------------------------------------------

<span style="font-size:14px;line-height:2;">JQuery中获取CSS样式</span><br style="font-family:;font-variant:normal;white-space:normal;word-spacing:0px;text-transform:none;color:;padding-bottom:0px;padding-top:0px;padding-left:0px;widows:1;margin:0px;letter-spacing:normal;line-height:22px;padding-right:0px;-webkit-text-stroke-width:0px;" />

css(name)：访问第一匹配元素的样式属性

css(name,value)：在所有匹配的元素中，设置一个样式属性的值

css(properties)：把一个“名/值对”对象设置为所有匹配元素的样式属性

css(name,function(index,value))：在所有匹配的元素中，设置一个样式属性的值

<span style="font-size:14px;line-height:2;">------------------------------------------------------------------------------------------------</span>

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的效果。

<span style="font-size:14px;line-height:2;">---------------------------------------------------------------------------------------</span><br style="font-family:;font-variant:normal;white-space:normal;word-spacing:0px;text-transform:none;color:;padding-bottom:0px;padding-top:0px;padding-left:0px;widows:1;margin:0px;letter-spacing:normal;line-height:22px;padding-right:0px;-webkit-text-stroke-width:0px;" />

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的效果。

<p>
    <br />

    <span style="font-size:14px;line-height:2;"> </span>