記事詳細

投稿日
2025年11月05日08時08分
タイトル

id属性に数値が設定されている<a>タグをJavascriptで操作する

内容

解決方法

  1. HTML構造
    id属性に数値が設定されている<a>タグがあることを前提とします。

  2. CSSスタイル
    .link-button.activeにスタイルを指定します。

  3. JavaScriptでクラスを付与
    ViewBag.ThisMonthの値を取得し、それに対応するidを持つ要素にactiveクラスを追加します。

コード例

HTML

Html
<a asp-action="MonthSelect" asp-route-num="@item" id="@item" class="btn btn-sm link-button">
    @($"{item}月の家計簿")
</a>

CSS

Css

<style>

    .link-button {

        display: inline-block;

        padding: 0.25rem 0.5rem; /* btn-smのpadding */

        font-size: 0.875rem; /* btn-smのフォントサイズ */

        line-height: 1.5; /* btn-smの行間 */

        border-radius: 0.2rem; /* btn-smの角丸 */

       /*  padding: 10px 20px;

        font-size: 16px; */

        color: white;

        background-color: #007bff;

        text-decoration: none;

       /*  border-radius: 5px; */

       /*  border: none; */

        cursor: pointer;

        text-align: center;

        transition: background-color 0.3s ease;

    }


        .link-button:hover {

            background-color:coral;

        }


        .link-button.active {

            background-color: coral;

        }


</style>


JavaScript

Javascript
document.addEventListener("DOMContentLoaded", function () {
    // ViewBag.ThisMonthの値を取得（サーバーサイドで埋め込む）
    const thisMonth = @ViewBag.ThisMonth;

    // 該当するIDを持つ要素を取得
    const activeButton = document.getElementById(thisMonth);

    // 要素が存在する場合、activeクラスを追加
    if (activeButton) {
        activeButton.classList.add("active");
    }
});

説明

  1. @ViewBag.ThisMonthの埋め込み
    Razorビューエンジンを使用して、ViewBag.ThisMonthの値をJavaScriptに埋め込みます。
    例: const thisMonth = 5;（ViewBag.ThisMonthが5の場合）。

  2. document.getElementByIdで要素を取得
    idがViewBag.ThisMonthの値と一致する要素を取得します。

  3. classList.add("active")でクラスを追加
    該当する要素にactiveクラスを追加し、CSSスタイルを適用します。

注意点

  • ViewBag.ThisMonthが数値であることを確認してください。
  • JavaScriptコードは<script>タグ内に記述するか、外部ファイルとして読み込んでください。
  • DOMContentLoadedイベントを使用して、DOMが完全に読み込まれた後にスクリプトを実行します。

これで、ViewBag.ThisMonthの値に基づいて特定のボタンにスタイルを適用できます！

Powered by Froala Editor
添付画像
画像はありません
Genreのカテゴリ-名
JavaScripts
編集 | 記事一覧