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

JavaScriptで親要素にCSSクラスを適用・継承する方法をわかりやすく解説

JavaScriptを使って新しく作成した要素にCSSのスタイル（クラス）を適用したい場合、document.createElement()、classList.add()、そしてappend()を組み合わせることで簡単に実現できます。

基本的な仕組み

処理の流れは以下の3ステップです。

1. document.createElement()： 新しいdiv要素などのHTML要素を動的に生成します。
2. classList.add()： 生成した要素に対して、あらかじめ定義しておいたCSSクラス（.classセレクタ）を追加します。これにより、そのクラスに設定されたスタイルが継承・適用されます。
3. append()： スタイルが適用された要素を、親となる要素（コンテナ）に追加して画面に表示します。

サンプルコード

ボタンをクリックすると、CSSクラスが適用された新しいdiv要素が親要素内に追加される例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    .add-all-subject {
        display: grid;
        height: 100px;
        width: 100px;
        grid-template-columns: 2fr 2fr 2fr 2fr 2fr;
        grid-template-rows: 2fr;
        grid-column-gap: 5.9rem;
        grid-row-gap: 2rem;
        color: red;
        border: 2px solid red;
    }
</style>
</head>
<body>
<button onclick="saveAllSubjects()">科目を追加</button>
<div id="add-subject">
</div>
<script>
    const addSubjectArea = document.getElementById("add-subject");
    function saveAllSubjects() {
        const allSubject = document.createElement('div');
        allSubject.classList.add('add-all-subject');
        addSubjectArea.append(allSubject);
    }
</script>
</body>
</html>

実行方法

上記のプログラムを実行するには、ファイル名を「index.html」など任意の名前（拡張子は.html）で保存します。その後、VS Codeを使用している場合は、保存したファイルを右クリックし、「Open with Live Server」を選択するとブラウザ上で確認できます。

実行結果

ページを読み込んだ直後は、ボタンだけが表示されたシンプルな画面になります。

ここで「科目を追加（Add Subjects）」ボタンをクリックすると、saveAllSubjects()関数が実行され、赤い枠線とグリッドレイアウトが適用された新しいdiv要素が親要素（#add-subject）の中に追加されます。

ボタンをクリックするたびに、同じCSSクラスを持つ要素が次々と生成され、スタイルが自動的に引き継がれることが確認できます。

まとめ

このように、createElement()で要素を生成し、classList.add()で既存のCSSクラスを付与することで、JavaScriptからでも親要素や定義済みスタイルのプロパティを簡単に継承・適用できます。動的にUIを構築したい場合に非常に便利なテクニックなので、ぜひ活用してみてください。

  1. JavaScriptでCSSルールをスタイルシートに追加・削除する方法【insertRule()とdeleteRule()の使い方】

    JavaScriptを使えば、ページに読み込まれたスタイルシートに対して動的にCSSルールを操作できます。その中心的な役割を果たすのが insertRule() メソッドと deleteRule() メソッドです。insertRule(): スタイルシート内の指定した位置（インデックス）に新しいCSSルールを追加します。deleteRule(): 指定したインデックスにある既存のスタイルルールを削除します。以下の具体例を通じて、JavaScriptでスタイルシートへCSSルールを追加する方法を見ていきましょう。例1：insertRule()で新しいルールを追加する<!DOCTYPE ht

  2. React Nativeでアプリにスタイルを追加する方法｜StyleSheetとインラインスタイルの使い方を徹底解説

    React Nativeでは、WebのようにCSSファイルを直接読み込むのではなく、JavaScriptのオブジェクト形式でスタイルを定義します。アプリにスタイリングを追加する方法は、主に以下の2つです。 StyleSheetコンポーネントを使う インラインスタイルを使う 方法1：StyleSheetコンポーネントを使う React NativeのStyleSheetコンポーネントは、スタイルを一箇所にまとめて管理できる非常に便利な仕組みです。コードの可読性が向上するだけでなく、スタイルの検証やパフォーマンスの最適化も行われるため、実際の開発現場ではこちらの方法が推奨されています。 まず