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

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

以前の JavaScript では、最初にクラス属性を取得してから文字列を処理する必要があったため、処理があまり便利ではありませんでした。

html5では、クラス属性を操作するためにすべての要素にclassList属性が追加されました。これは非常に便利です。

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型であり、クラス属性はaddcontainsremoveなどのメソッドを通じて操作できます。

  • 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript 操作要素の例
  • JavaScript WebAPI、DOM、イベント、操作要素例の詳しい説明
  • jsは2つのjson配列を操作して、マージ、重複の削除、特定の要素の削除を行います。
  • vue.jsのクリックイベントは現在の要素オブジェクトの操作を取得します
  • JavaScript HTML DOM要素(ノード)の追加、編集、削除操作例の分析
  • JS ドキュメント フォーム フォーム要素操作の完全な例
  • JavaScript操作要素の共通メソッドのまとめ
  • JavaScript操作要素は、ページコンテンツのスタイルを変更する方法を教えます

<<:  CSS でよく使用されるフォントサイズ、フォント単位、行の高さの詳細な説明

>>:  インラインブロックを使用した複数のdiv間の間隔はプログラミング方法とは異なります

推薦する

SQLシリアル番号取得コード例

この記事は主にSQLシリアル番号取得コード例を紹介します。記事ではサンプルコードを詳細に紹介しており...

Dockerイメージ解析ツールのダイブ原理解析

今日は、Docker イメージ、各レイヤーの内容を調べ、Docker/OCI イメージのサイズを縮小...

JavaScript は setTimeout を使用してカウントダウン効果を実現します

JavaScript ネイティブ コードの記述能力を高め、setTimeout() の使用を強化する...

Dockerイメージを構築する2つの方法

目次既存のイメージからイメージを更新します。イメージを最初から構築する: Docker イメージ リ...

node.js が大規模プロジェクトに適さない理由

目次序文1. アプリケーションコンポーネント2. アプリケーションの種類3. アプリケーションサービ...

Maven+Tomcat 基本イメージを構築する Docker の実装

序文Javaプログラミングでは、ほとんどのアプリケーションはMavenに基づいて構築されており、配信...

Vue.jsはカレンダー機能を実装します

この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...

Javascript ファイルと Blob の詳細な説明

目次ファイル()文法パラメータ例ブロブ()文法パラメータ財産方法例要約するファイル() File()...

js に基づいて大きなファイルのアップロードとブレークポイントの再開を管理する方法

目次序文フロントエンド構造バックエンド構造(ノード+エクスプレス) FormDataに基づくファイル...

HTML thead タグの定義と使用法の詳細な紹介

コードをコピーコードは次のとおりです。 <thead> <!– 最初の 2 行をヘ...

MySQL での一時テーブルの使用例

ここ2日間ちょっと忙しくて、公式アカウントも数日更新が止まってしまいました。その結果、何人かの読者か...

Vue を使用して Web ページのスクリーンショットを撮る方法をご存知ですか?

目次1. html2Canvasをインストールする2. 必要なVueコンポーネントを導入する3. ス...

Linux chkconfig コマンドの使用

1. コマンドの紹介chkconfig コマンドは、システム サービスの実行レベル情報を更新および照...

ZFS とは何か? ZFS を使用する理由とその機能

ZFSの歴史Z ファイル システム (ZFS) は、2001 年に Matthew Ahrens と...