69

element.classListDOMTokenListタイプです。

このリストをクリアする方法はありますか?

4

7 に答える 7

111

に関連付けられている「関数」という意味での「メソッド」については知りませんclassList。個々のクラスを追加または削除するメソッドが.add()あり.remove()ますが、次のように要素からすべてのクラスを削除するという意味でリストをクリアできます。

element.className = "";
于 2013-02-23T12:02:42.787 に答える
7

これを行う別の方法は次のとおりです。

element.setAttribute("class", "")
于 2019-09-29T00:35:23.113 に答える
4

現在では、またはよりclassListも が好まれています。上記のPekaawの答えは良いです.1つの同様の代替手段は、(remove|set)AttributeclassNameDomTokenList.value

elem.classList.value = ''
于 2020-08-06T16:37:16.520 に答える
1

DOM の更新が速くなる可能性があるので、使用classNameしないことをお勧めします。classList

のremove()メソッドDOMTokenList(つまりclassList) は、複数の引数を取ることができます。それぞれは、削除するクラス名の文字列 (参照) です。classListまず、 をクラス名のプラン配列に変換する必要があります。一部の人々はそれを使用Array.prototype.slice()していましたが、私はファンではなく、ほとんどのブラウザーで for ループの方が高速だと思います。配列を取得したら、apply()その配列を引数のリストとして渡すために使用するだけです。

これを実現するために、私が作成したユーティリティ クラスを使用します。最初の方法はあなたが探しているものですが、参考のために少し追加します。

ElementTools.clearClassList = function(elem) {
    var classList = elem.classList;
    var classListAsArray = new Array(classList.length);
    for (var i = 0, len = classList.length; i < len; i++) {
        classListAsArray[i] = classList[i];
    }
    ElementTools.removeClassList(elem, classListAsArray);
}
ElementTools.removeClassList = function(elem, classArray) {
    var classList = elem.classList;
    classList.remove.apply(classList, classArray);
};
ElementTools.addClassList = function(elem, newClassArray) {
    var classList = elem.classList;
    classList.add.apply(classList, newClassArray);
};
ElementTools.setClassList = function(elem, newClassArray) {
    ElementTools.clearClassList(elem);
    ElementTools.addClassList(elem, newClassArray);
};

私が取り組んでいるプロジェクトは、非常に限られた最新のブラウザーのセットでのみ動作する必要があるため、すべてのブラウザーでこれを完全にテストしたわけではないことに注意してください。しかし、それは IE10 に戻って動作するはずです。また、classList にシム ( https://github.com/eligrey/classList.js ) を含めると、IE7 に戻って動作するはずです(Eli Grey のシムがサポートされていないブラウザーでも SVG を使用できます)。

私が検討した別のアプローチは、 を逆方向にループして、各エントリの classList をclassList呼び出すことでした。remove()(それぞれを削除すると長さが変化するため、逆方向に移動します。)これも機能するはずですが、複数の引数を使用するremove()方が高速になる可能性があると考えました。これは、最新のブラウザーが最適化され、remove() for ループ。さらに、両方のアプローチには for ループ (リストを作成するか、それぞれを削除するため) が必要であるため、この代替アプローチには利点がありませんでした。しかし、繰り返しますが、速度テストは行いませんでした。

誰かがさまざまなアプローチの速度をテストしたり、より良い解決策を持っている場合は、投稿してください.

編集:シムにバグが見つかりました。これにより、 と への複数の引数のサポートが IE11/10 に正しく追加されなくadd()なりremove()ます。githubにレポートを提出しました。

于 2016-09-04T15:14:19.427 に答える