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

本文目录一览：

• 1、js动态添加或删除class，怎么在返回上一页的时候保留？
• 2、jquery 点击事件点击元素添加和移除class
• 3、原生javascript 增加 删除 class
• 4、jquery的addClass和removeClass使用方法是什么？
• 5、如何利用JS实现在li中添加或删除class属性

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”);

});