首页 > 编程知识 正文

js元素添加移除class,js移除某个元素

时间:2024-03-07 18:23:34 阅读:332053 作者:GCUJ

本文目录一览:

js动态添加或删除class,怎么在返回上一页的时候保留?

你可以把动态添加的样式利用cookie来保存,然后打开页面的时候再从cookie取出来然后addClass。删除也一样,removeClass后再把该样式从cookie移除。

也可以用LocalStorage来储存,可实现永久保存(除非删除浏览器),不过这个有浏览器兼容性,老的浏览器不支持。

如果想改变后其他人也能看到改变后的样式,那就只能修改css或html文件了。

jquery 点击事件点击元素添加和移除class

可以使用:$("#but").removeAttr("class");和$("#but").attr("class","but_test");来对标签进行元素的添加和删除。

为了直观性的看到结果,首先在css样式中,针对class选择该元素,之后添加相应的样式。

接下来,就给该button按钮添加一个点击事件,让它能过自由切换。

对该点击事件添加js函数。

运行后的结果为:

拓展资料:

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

原生javascript 增加 删除 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应该已经能做出所有效果了

jquery的addClass和removeClass使用方法是什么?

addClass

描述: 为每个匹配的元素添加指定的样式类名

.addClass( className ),className为一个String字符串,为指定元素添加这个classname的类

.addClass( function(index, currentClass) ),这个函数返回一个或更多用空格隔开的要增加的样式名。接收index 参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向匹配元素集合中的当前元素。

removeClass

描述: 移除集合中每个匹配元素上一个,多个或全部样式。

.removeClass( [className ] ),每个匹配元素移除的一个或多个用空格隔开的样式名。

.removeClass( function(index, class) ),这个函数,返回一个或多个将要被移除的样式名。index 参数表示在所有匹配元素的集合中当前元素的索引位置。class 参数表示原有的样式名。

jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jouml;rn Zaefferer,罗马尼亚的Stefan Petre等等。

jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。

它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。

jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

如何利用JS实现在li中添加或删除class属性

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

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

1、为li添加class属性:

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

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

2、删除class属性:

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

});

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。