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

});