原生js怎么添加一个或多个类名？

添加 单个 class:

添加多个类:

移除一个类:

移除多个类:

检查是否含有某个类

    // dom 元素处理

    // 获取dom属性

    function getAttr( attr )

    {

        return this.getAttribute( attr )

    }

    // 设置属性

    function setAttr( attr, val )

    {

        this.setAttribute( attr, val )

        return this

    }

    // 编辑元素class

    function editClass( mode, data )

    {

        var cls = getAttr.call( this, "class" ) || ''

        var arr = cls.split( /\s+/ )

        switch( mode )

        {

            case "add":

                return setAttr.call( this, "class", cls + " " + data )

            break

            case "remove":

                for( var i = 0 i < arr.length i++ )

                {

                    if( arr[ i ] == data )

                    {

                        arr.splice( i, 1 )

                    }

                }

                var cls = arr.join( " " )

                cls = cls.replace( /^\s|\s$/g, "" )

                // cls = cls == "" ? null : cls

                return setAttr.call( this, "class", cls )

            break

            default:

                console.log( "EditClass mode error!" )

                return this

            break

        }

    }

    // 添加class

    function addClass( cls )

    {

        return editClass.call( this, "add", cls )

    }

    // 删除class

    function removeClass( cls )

    {

        return editClass.call( this, "remove", cls )

    }

    

    // 我写的这个调用起来和普通的调用方式不一样， 需要用call

    

    // 比如

    dom = document.getElementById('domid')

    addClass.call(dom, 'newclass') // 给dom添加名为‘newclass’的classname

至于toggle没用过，不清楚是什么效果， 不过我想结合add和remove应该已经能做出所有效果了

方法一：

使用DOM.setAttribute("class","类名")

方法二：

DOM.classList.add("类名")

方法一给DOM元素添加类名会覆盖原有的类名

方法二 可以给DOM元素添加一个类名后 还可以在继续给DOM元素添加新的类名 并且不会覆盖已有的类名

概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。

使用方式：fatherdom.appendChild( insertdom )。

兼容性：所有浏览器都支持此方法。

概念：把要插入的节点添加到指定父级里面的指定节点之前。

使用方式：fatherdom.insertBefore( insertdom，chosendom )。

兼容性：所有浏览器都支持此方法，但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在

效果

注意：很多人都认为设置disabled="true"是为启用，设置为“false”时为禁用，这是错的。

---