关于JS setTimeout与removeClass的问题，求大神帮看看！

我想实现的效果是，点击按钮，给指定的DIV添加 className 等待3秒后删除给这个DIV添加的className ；
我写的代码，老是提示我Uncaught TypeError: undefined is not a function
下面是我的代码，请大神帮忙看看我哪里写错了，谢谢哈；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>animate.css动画演示_dowebok</title>
<link rel="stylesheet" href="animate.min.css">
<style>
* { margin: 0; padding: 0;}
#dowebok{
    width: 400px;
    height: 500px;
    background-color: #998822;
    margin: 100px 0px 0px 200px;
}

</style>
<script>
function getodiv(){
    var odiv = document.getElementById('dowebok');
    var Bat_1 = document.getElementById('Bas');
    odiv.className = 'animated bounce';
    setTimeout(function(){
            odiv.removeClass('animated bounce');
        },3000);
}
</script>
</head>

<body>
<input type="button" value="演示动画" id="Bas" onclick="getodiv()" />
<div id="dowebok">gggg</div>
</body>
</html>

问题主要出在原生js没有removeClass这个方法。
最简单的办法就是直接设置className为删除后的样子，删除后class为空，因此

odiv.className = '';

也可以自己写2个函数，分别用于添加和删除class操作

/*
 *@id string 需要添加元素的id名
 *@classname string 需要被添加的类名
 *@return string 添加之后元素的类名
 */
function addClass(id, classname) {
    var obj = document.getElementById(id),
        classname_source = obj.className,
        classname_res = classname_source == '' ? classname : classname_source + ' ' + classname;

    obj.className = classname_res;

    return classname_res;
}

因为有朋友发现了bug，因此做了一些修正,只能删除单个class，删除多个时顺序必须一致才行

function removeClass(id, classname) {
    var
        obj = document.getElementById(id),
        classname_source = obj.className,
        reg = new RegExp(' '+classname, 'g'),
        reg2 = new RegExp(classname+' ', 'g'),
        classname_res;
        if (classname_source.indexOf(classname) == 0) {
            classname_res = classname_source.replace(reg2, '');
            console.log(classname_source);
        } else {
            classname_res = classname_source == classname ? '' : classname_source.replace(reg, '');
        }

    obj.className = classname_res;
    return classname_res;
}

后来调整了思路，写了一个功能稍微强大一点的removeClass，可删除任意个数任意顺序的class，不同的class用空格隔开。

function removeClass2(id, classname) {
    var
        obj = document.getElementById(id),
        classname_source = obj.className,
        arr_source = classname_source.split(' '),
        cur_source = classname.split(' '),
        res_source = [],

        len = arr_source.length;

    for(var i=0; i<len; i++) {
        if(!isArrEle(cur_source, arr_source[i])) {
            res_source.push(arr_source[i]);
        }
    }

    var classname_res = res_source.join(' ');
    obj.className = classname_res;
    return classname_res;
}

function isArrEle(arr, ele) {
    for(var item in arr) {
        if (arr[item] == ele) {
            return true;
        }
    }
    return false;
}

若发现bug，欢迎指正，相互学习，3Q.

有bug版 1.0

function removeClass(id, classname) {
    var
        obj = document.getElementById(id),
        classname_source = obj.className,
        reg = new RegExp(' '+classname, 'g'),
        classname_res = classname_source == classname ? '' : classname_source.replace(reg, '');

    obj.className = classname_res;
    return classname_res;
}

你jq写多了吧？ js原生中是没有这个方法的

odiv.removeClass('animated bounce'); 改为 odiv.className = '' 试试.

还不如直接用jQuery写，js不熟何必这么难受

【热门文章】