• このエントリーをはてなブックマークに追加
jQueryでボタンをクリックしたときに文字の色を変える
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

jQueryでボタンをクリックしたときに文字の色を変える

2013-03-12 15:11
    ●スクリプト
    <script type="text/javascript">
    $(function(){
      $("button#yamato").click(function(){
        $("p").removeClass("red");
        $("p").addClass("green");
      })
    });
    </script>


    ●HTML
    <button id="yamato">ここをクリックすると色が変わります</button>
    <p class="red">東京</p>

    ●CSS
    p.red{
    color: red;
    }

    p.green{
    color: green;
    }

    最初に赤色の東京が表示される。redのスタイルが適用されている状態である。
    ボタンをクリックすると、クラスredが消されて
    greenが追加される。
    よって、greenのスタイルが適用されるので、
    文字の色が赤色から緑色に変わる。

    サンプルソース

    チャンネル会員ならもっと楽しめる!
    • 会員限定の新着記事が読み放題!※1
    • 動画や生放送などの追加コンテンツが見放題!※2
      • ※1、入会月以降の記事が対象になります。
      • ※2、チャンネルによって、見放題になるコンテンツは異なります。
    ブログイメージ
    東京ウェブ制作ブロマガ
    更新頻度: 不定期
    最終更新日:
    チャンネル月額: ¥550 (税込)

    チャンネルに入会して購読

    コメントを書く
    コメントをするにはログインして下さい。