JS添加删除CLASS

JS添加删除CLASS,第1张

$(function(){

//alert(1)

$('.m_l dl dt').mouseover(

function(){

//alert(1)

$('.m_l dl dt').removeClass("m_1_class2")//清除class

$(this).addClass("m_1_class2")//添加class

}

可以使用jQuery的attr方法来实现对某一元素的的class的属性的添加或者删除,attr() 方法设置或返回被选元素的属性值.根据该方法不同的参数,其工作方式也有所差异,可以使用removeclass来删除class属性。

工具原料:编辑器、浏览器

1、为li添加class属性:

为某个li元素添加class=“special”的属性

$('li').attr('class','special')

2、删除class属性:

 $("li").removeClass("special")

})

    // 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应该已经能做出所有效果了


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11644688.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存