[jQuery]でcssプロパティを動的に追加、変更、削除する

More than 1 year has passed since last update.

jQueryでHTML要素にcssプロパティを動的に追加・変更・削除する記述方法のメモ。
cssのstyle属性を直書きする場合はcss()メソッドを、cssを追加する場合はaddClass( )削除する場合はremoveClass( )メソッドを使用します。

  • 直書きcss( )

  • 追加 addClass( )

  • 削除 removeClass( )

前提

事前に、html内でjQueryを読み込んでおきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

記述方法

jQueryでstyle属性を直書きしたい場合は[css( )]メソッド

ひとつのstyle属性の場合

$('要素').css('プロパティ','値');

複数のstyle属性の場合

$('要素').css({'プロパティ':'値','プロパティ':'値'});

HTML内の要素にcssを追加、削除したい場合は[addClass( )] [removeClass( )]メソッド

要素にClassを追加する

$('要素').addClass('css名');

要素についているClassを削除する

$('要素').removeClass('css名');

「css( )」メソッドでstyle属性の追加、変更、削除

  • ひとつのcssプロパティの場合 例えば、HTML要素にclass「test」がついた要素のcss「color」を「blue」に追加,変更したい場合
$('.test').css('color','blue');

これでcssが追加され、既にcolor指定されていた場合でも、この記述が有効になります。

  • 複数のcssプロパティの場合 例えば、ID「jedy」がついた要素のcss「color」を「blue]に、[font-size」を[20px]に追加、変更したい場合
$('#jedy').css({'color':'blue','font-size':'20px'});
  • cssプロパティの削除 例えば、class「test」がついた要素のcss「color」指定を削除したい場合
$('.test').css('color','');

「addClass()」「removeClass()」メソッドでcssの追加,削除

  • cssを追加 例えば、ID「jedy」がついた要素にcss「force」を追加したい場合
$('#jedy').addClass('force');
  • cssを削除
$('#jedy').removeClass('force');

複数cssプロパティを用意しておいて、動的に変更するときなどに便利です。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.