html5 の新しいメソッドを使用して JavaScript で要素クラス名を操作する方法の詳細な説明

1. classList属性

まず次のコードを見てください。

<ul class="nav">

    <li class="active">列 1</li>

    <li>列 2</li>

    <li>列 3</li>

</ul>

<script type="text/javascript">

    // 現在の li 要素を取得します。let activeLi = document.querySelector(".active");

    // classList 属性を印刷 console.log(activeLi.classList)

    // コンソール出力:

    // DOMTokenList ['active', 値: 'active']

</スクリプト>

コンソールビュー効果:

classList属性タイプ:

classList属性はDOMTokenList型であり、クラス属性はadd 、 contains 、 removeなどのメソッドを通じて操作できます。

add(value)新しいクラス名を追加します。
contains(value)クラス名が含まれているかどうか。
remove(value)クラス名を削除します。
toggle(value)クラス名が存在する場合は削除し、存在しない場合は追加します。

2. 実用化

実際には、列の切り替えは非常に一般的なアプリケーションです。上記の例を続けると、列をクリックすると、対応する列にactive移動します。

<ul class="nav">

    <li class="item active">列 1</li>

    <li class="item">列 2</li>

    <li class="item">列 3</li>

</ul>

 

<script type="text/javascript">

    currentElement を document.querySelector(".nav").firstElementChild とします。

    // li 要素をトラバースし、クリック イベントを設定します while (currentElement) {

        currentElement.onclick = 関数() {

            // アクティブなliを削除する

            document.querySelector(".active").classList.remove("active");

            // 現在のliクラスはアクティブな

            this.classList.add("アクティブ");

        }

        currentElement = currentElement.nextElementSibling;

    }

</スクリプト>

これにより、他のクラス名に影響を与えずに実装できるので非常に便利です。

これで、 html5の新しいメソッドを使用してJavaScriptで要素クラス名を操作する方法についての詳細な説明は終わりですhtml5の新しいメソッドを使用してJavaScriptで要素クラス名を操作する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: