Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScript Add Class：ガイド

要素にクラスプロパティを追加すると、開発者はWebページで動的なユーザーエクスペリエンスを作成できます。クラスプロパティが要素に追加されると、その選択された要素は、そのクラス名に関連付けられたスタイルを引き継ぎます。

ユーザーがボタンをクリックすることを考えてみてください。ボタンがクリックされたときに、CSSスタイルシートに基づいてWebページのセクションを変更する必要があります。ボタンがクリックされた後の外観を変更するために、そのスタイルに関連付けられたクラス名を要素に割り当てることができます。

インタラクティブなエクスペリエンスを作成することは、フロントエンドプログラミングで重要です。このガイドでは、プレーンJavaScriptで選択した要素にクラス名を追加する2つの方法について説明します。最終的には、このツールを独自のプロジェクトで使用できるようになります。

JavaScript追加クラスの使用方法

JavaScriptでは、クラス名の追加はいくつかの方法で行うことができます。まず、目的のHTML要素を選択します。次に、classNameプロパティまたはadd()のいずれかを使用するかを選択できます。 クラス名を要素に追加するメソッド。次のセクションでは、構文と使用法について説明します。

ここではプレーンJavaScriptを使用していることを忘れないでください。ライブラリは必要ありません。通常のJavaScriptを使用しているため、一般的な方法は、上記のロジックを関数内にラップし、その関数をイベントハンドラーに渡すことです。これにより、クラス名を追加する機能は、特定のイベントが発生した後にのみ発生します。

HTML要素に関する限り、それらは複数のクラス名を持つことができます。すでに他のクラス名またはIDを持つ要素にクラス名を追加できるため、これは覚えておくと便利です。覚えておく必要があるのは、どのスタイルがプロジェクトのどのクラス名に関連付けられているか、そしてスタイルを設定する要素に名前を追加することだけです。

クラス名を追加するためのJavaScript構文

要素にクラス名を追加する2つの方法を見ていきます。上記のセクションから、関数内にクラスを追加するためにロジックをラップすることが一般的な方法であることを思い出してください。関数を作成したら、onClickHTML属性内で呼び出すことができます。

プレーンJavaScriptを使用してクラス名を追加する最初の方法は、classNameプロパティを使用することです。ここでのロジックは、要素を選択してから、選択した要素で.classNameを呼び出すことです。次に、クラス名を要素に連結できます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

HTMLから始めましょう： 

<div id="div">
Hello World
</div>
<button>
Add Class
</button>
JavaScript Add Class：ガイド

ここに、IDが「div」の

があります。
の下にはボタンがあります。このボタンをクリックすると、クラス名が追加されます。次に、CSSクラスの例を見てみましょう。 

.background {
  background-color: blue;
  color: white;
}

CSSファイルには、「background」というクラスがあります。ここでは、背景色が青でスタイリングされ、テキストは白になります。クラス名「background」をID「div」で

に追加します。

JavaScriptは、次のような関数で

の選択を処理できます。 

const addClass = () => {
  const element = document.getElementById('div');
  element.className += "background"
}

addClassという関数は、「div」のIDで

を選択します。それをelementという変数に格納できます。ここから、変数のclassNameプロパティを呼び出し、クラス名を「background」に連結します。レビューとして、JavaScriptでの連結により、要素がリストに追加されます。つまり、クラス名を連結すると、そのクラス名が要素に追加され、その要素で以前に定義されたクラスが引き続き表示されます。

まだ完成していません！まだどこかでaddClass関数を呼び出す必要があります。ボタンがクリックされた後、クラス名を

に追加しましょう。 

<div id="div">
Hello World
</div>
<button onClick="addClass()">
Add Class
</button>

JavaScriptのonClickメソッドを使用することで、ボタンがクリックされた後に関数を呼び出すことができます。ボタンをクリックしてテストしてみましょう。

JavaScript Add Class：ガイド

何が起こったかを確認するために、CSSファイルにスタイリングに関連付けられたクラス名「background」を追加しました。要素を見つけてクラス名を追加するJavaScript関数を作成した後、ボタンがクリックされると、クラススタイルが

に適用されました。

JavaScript add（）メソッド

上記と同じ例を使用して、クラス名を追加する別の方法を見てみましょう。これには、JavaScriptのadd()の使用が含まれます 方法。上記の例とは異なり、classListプロパティを使用してadd()を呼び出します。 。

addClass() 関数は次のようになります。 

const addClass = () => {
  const element = document.getElementById('div');
  element.classList.add("background")
}

まだ

をそのIDで取得し、変数に格納しています。次に、変数のclassListプロパティを呼び出し、続いてadd()を呼び出します。 方法。クラス名「background」をadd()に渡します 引数として。

にクラス「background」が追加されました。

JavaScript Add Class：ガイド

2つの異なる方法でコーディングしても同じ結果が得られます。コードに実装する方法はあなた次第ですが、2番目の方法がベストプラクティスとして広く受け入れられています。 add()を使用する 連結を使用するよりもエラーが発生しにくいため、ベストプラクティスと見なされます。

結論

このガイドでは、要素にクラス名を追加する方法を学びました。これは、CSSファイルでスタイル設定されたクラスがある場合に役立ちます。クラス名を特定のHTML要素に追加することにより、その要素はCSSファイルにあるスタイルを継承します。

ページ上の要素の外観を動的に変更することで、ユーザーにアプリのインタラクティブなエクスペリエンスを提供できます。インタラクティブなアプリケーションを作成するとき、それは自然でユーザーにとって魅力的だと感じます。それは彼らが私たちのアプリをさらに探求するために戻ってくることを続けます。


  1. appendChild JavaScript：ガイド

    JavaScriptのappendChild（）メソッドは、ノードの最後にアイテムを追加します。 appendChild（）は、アイテムをリストに追加するためによく使用されます。ノードに複数のアイテムを追加する場合は、複数のappendChild（）ステートメントを使用する必要があります。 JavaScriptのappendChildの使用方法 一部のリストにはテキストが含まれています。他のリストには画像が含まれています。他のリストには、カスタムWeb要素が含まれています。リストにあるものが何であれ、確かなことが1つあります。それは、Webページがリストでいっぱいであることです。 リスト

  2. JavaScriptで純粋に別のliにクラス名を追加しますか？

    クラスを追加するには、forEach（）をclassList.add（）と一緒に使用します。 例 以下はコードです- <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">   &nb