以前の 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属性タイプ:
2. 実用化実際には、列の切り替えは非常に一般的なアプリケーションです。上記の例を続けると、列をクリックすると、対応する列に <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; } </スクリプト> これにより、他のクラス名に影響を与えずに実装できるので非常に便利です。 これで、 以下もご興味があるかもしれません:
|
<<: CSS でよく使用されるフォントサイズ、フォント単位、行の高さの詳細な説明
>>: インラインブロックを使用した複数のdiv間の間隔はプログラミング方法とは異なります
この記事は主にSQLシリアル番号取得コード例を紹介します。記事ではサンプルコードを詳細に紹介しており...
今日は、Docker イメージ、各レイヤーの内容を調べ、Docker/OCI イメージのサイズを縮小...
JavaScript ネイティブ コードの記述能力を高め、setTimeout() の使用を強化する...
目次既存のイメージからイメージを更新します。イメージを最初から構築する: Docker イメージ リ...
目次序文1. アプリケーションコンポーネント2. アプリケーションの種類3. アプリケーションサービ...
序文Javaプログラミングでは、ほとんどのアプリケーションはMavenに基づいて構築されており、配信...
この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...
目次ファイル()文法パラメータ例ブロブ()文法パラメータ財産方法例要約するファイル() File()...
ルートジャンプ this.$router.push('/course'); this...
目次序文フロントエンド構造バックエンド構造(ノード+エクスプレス) FormDataに基づくファイル...
コードをコピーコードは次のとおりです。 <thead> <!– 最初の 2 行をヘ...
ここ2日間ちょっと忙しくて、公式アカウントも数日更新が止まってしまいました。その結果、何人かの読者か...
目次1. html2Canvasをインストールする2. 必要なVueコンポーネントを導入する3. ス...
1. コマンドの紹介chkconfig コマンドは、システム サービスの実行レベル情報を更新および照...
ZFSの歴史Z ファイル システム (ZFS) は、2001 年に Matthew Ahrens と...