js实现css、addClass、removeClass和toggleClass

mac2022-06-30  18

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

转载于:https://www.cnblogs.com/chenjianhui/p/5868520.html

相关资源:JAVA上百实例源码以及开源项目
最新回复(0)