JavaScriptで特定のパラメーターに基づいてクラスを追加する方法

Posted on by

ウェブ開発において、URLパラメーターを利用してページの表示内容を動的に変更することは、よくある手法です。特定のパラメーターがURLに含まれている場合にのみ特定のクラスをHTML要素に付与することで、スタイルや動作を変えることができます。本記事では、JavaScriptを使って?referer=previewパラメーターがある場合にクラスを追加する方法をご紹介します。

実装の流れ

  1. HTMLの準備: クラスが追加される対象の要素を定義します。
  2. JavaScriptでパラメーターをチェック: URLのクエリパラメーターを取得し、特定のパラメーターが存在するか確認します。
  3. クラスの追加: 条件に一致する場合にクラスを要素に追加します。
  4. CSSでスタイルを定義: 追加されたクラスに対してスタイルを定義します。

HTMLの準備

まず、対象となるHTML要素を用意します。この要素に対して特定のクラスを追加します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Conditional Class Addition</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="content">このコンテンツにクラスが追加されます。</div>
    <script src="script.js"></script>
</body>
</html>

JavaScriptでパラメーターをチェック

次に、JavaScriptを使ってURLのクエリパラメーターを取得し、referer=previewが存在するか確認します。存在する場合は特定のクラスを追加します。

// URLのクエリパラメーターを取得する関数
function getQueryParams() {
    const params = {};
    const queryString = window.location.search;
    const urlParams = new URLSearchParams(queryString);
    
    for (const [key, value] of urlParams.entries()) {
        params[key] = value;
    }
    
    return params;
}

// パラメーターがある場合にクラスを追加する関数
function addClassIfParamExists(paramName, paramValue, className) {
    const params = getQueryParams();
    const contentElement = document.getElementById('content');
    
    if (params[paramName] === paramValue) {
        contentElement.classList.add(className);
    }
}

// 特定のパラメーターが存在する場合にクラスを追加
addClassIfParamExists('referer', 'preview', 'highlight');

CSSでスタイルを定義

最後に、追加されるクラスに対してスタイルを定義します。ここでは、背景色を黄色、文字色を赤に設定します。

/* クラスが追加されたときのスタイル */
.highlight {
    background-color: yellow;
    color: red;
}

動作確認

URLが以下のようになっている場合に、highlightクラスが追加され、スタイルが適用されます。

http://example.com/?referer=preview

上記のJavaScriptコードは、ページが読み込まれるとURLのクエリパラメーターをチェックし、refererパラメーターの値がpreviewである場合にhighlightクラスをid="content"のdivタグに追加します。

まとめ

本記事では、JavaScriptを使用してURLパラメーターに基づいてHTML要素にクラスを追加する方法をご紹介しました。この手法を使うことで、ページのスタイルや動作を動的に変更することができ、ユーザーエクスペリエンスを向上させることができます。特定のパラメーターが含まれている場合にのみ特定のクラスを追加することで、柔軟かつ効果的なウェブページのカスタマイズが可能となります。