jQueryでCSSを追加/削除する時のまとめ

このエントリーをはてなブックマークに追加

こんにちは、fujinyoです。
jQueryでの細かな操作って忘れがちです。

僕はすぐ忘れてしまうので、自分用にメモ記事を投稿します。
メモ記事ってなかなか役立ってくれていて、MySQL関連の記事だったりはちょくちょく開発時に見たりしています。

要素にstyle属性を追加/削除する
CSS Carved PumpkinCSS Carved Pumpkin / mauricesvay

特定のHTML要素にstyle属性を追加/削除する方法です。

追加。

//p要素にcolor:blueを追加する
$('p').css('color','blue');

次は削除。

//p要素にcolor:blueを削除する
$('p').css('color','');
要素にClassを追加/削除する

特定のHTML要素にClassを追加/削除する方法です。

まずは追加。

//Div要素にsampleクラスを追加する
$('div').addClass('sample');

次は削除。

//Div要素からsampleクラスを削除する
$('div').removeClass('sample');

もう1つ.toggleClass()というメソッドがあります。
トグルというのは、同一の操作で二つの状態を交互に切り換えることという意味です。*1

//Div要素にsampleクラスが設定されていれば削除、無ければ追加する
$('div').toggleClass('sample');
まとめ

jQueryを使いこなせると、とても便利ですしサイト製作の幅が広がります。
僕ももう少し勉強して身につけたいと思います。

では、また。

*1 参考: toggleの意味 – 英和辞典 Weblio辞書

[PR] 「結さん」があなたに代わって開発案件の依頼主を探します

  • 「既存のクライアントにギャラアップは言いにくい」
  • 「営業活動する時間がないし、苦手」
  • 「仕事が途切れたらどうしよう」

ITエンジニアのこんな悩みを「結さん」が解決してくれます
結さんへの無料会員登録後は提案メールを待つだけです!

関連記事

このエントリーをはてなブックマークに追加