你的位置:首页 > Java教程

[Java教程]原生JS实现jQuery的addClass, removeClass, hasClass方法


原生JS可以通过className来设置类名,但是没有直接的类名添加、删除,但是可以封装函数做到如jQuery一样的方法。

aaa 
2015-09-08 15:26function hasClass(elem, cls) {
    cls = cls || '';
    if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回false
    return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
}

function addClass(ele, cls) {
    if (!hasClass(elem, cls)) {
        ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
    }
}

function removeClass(ele, cls) {
    if (hasClass(elem, cls)) {
        var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, '') + ' ';
        while (newClass.indexOf(' ' + cls + ' ') >= 0) {
            newClass = newClass.replace(' ' + cls + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
}

function toggleClass(obj, cls) {
    hasClass(obj, cls) ? removeClass(obj, cls) : addClass(obj, cls);
}