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

JavaScriptでDOM要素にクラスを追加する方法を解説

JavaScriptでDOM要素にクラスを追加するには、まず querySelector や getElementById などのメソッドを使って対象の要素を取得し、その後 classList.add() を使ってクラスを追加します。

HTMLの例

例として、以下のようなHTMLがあるとします。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <p id="para">これはテキストです</p>
  </body>
</html>

この p 要素を取得する方法は、主に以下の2つがあります。

方法1：querySelectorを使う

document.querySelector() は、CSSセレクタを指定して要素を取得できる汎用的なメソッドです。

const myPara = document.querySelector('#para');

クラス名やタグ名で取得したい場合は、それぞれ '.クラス名' や 'タグ名' を指定することもできます。

方法2：getElementByIdを使う

document.getElementById() は、IDを指定して要素を取得するシンプルなメソッドです。

const myPara = document.getElementById('para');

クラスを追加する

要素を取得したら、classList.add() メソッドを使ってクラスを追加できます。

const myPara = document.getElementById('para');
myPara.classList.add('myClass');

このコードを実行すると、para というIDを持つ要素に myClass というクラスが追加されます。

補足：複数のクラスを追加する

classList.add() は複数のクラスを同時に追加することも可能です。

myPara.classList.add('myClass', 'anotherClass');

また、クラスを削除したい場合は classList.remove()、クラスの有無を切り替えたい場合は classList.toggle() を使うと便利です。

  1. JavaScriptで要素からクラス名を削除する方法【classList.remove()の使い方】

    JavaScriptでHTML要素からクラス名（className）を削除するには、classList.remove()メソッドを使うのが最もシンプルで確実な方法です。このメソッドを使えば、対象の要素から指定したクラスを動的に取り除くことができ、ボタンのクリックなどユーザーの操作に応じてスタイルを切り替える際に非常に便利です。 サンプルコード 以下は、「Remove Class」ボタンをクリックすると、DIV要素からクラス名が削除される例です。 <!DOCTYPE html> <html> <head> <meta name="viewpor

  2. JavaScriptでループ処理に遅延を追加する方法をわかりやすく解説

    JavaScriptでループの各反復の間に遅延（待ち時間）を設けたい場合は、setTimeout() メソッドを使用します。この記事では、基本的な実装例から、より読みやすいモダンな書き方まで、コード例とともに解説します。 setTimeout()でループに遅延を追加する仕組み setTimeout() は、指定したミリ秒後にコールバック関数を一度だけ実行するメソッドです。ループ内で単に setTimeout(fn, 2000) と書くだけでは、すべてのタイマーがほぼ同時に登録されてしまい、意図した通りの遅延になりません。 そこでポイントとなるのが、遅延時間にループカウンタを掛け算するという手法