*

class属性の追加・削除

公開日: : 最終更新日:2015/10/29 jQuery ,

class属性は、ほかの属性とは違い、スペース区切って複数の値を設定できます。class属性の操作には、専用の命令はあります。

class属性の追加

class属性を追加するときは、addClass()命令を使用します。括弧内に追加したいclass属性の値を書きます。複数のclass属性をスペース区切りで追加できます。サンプルコードを見ると確認できますが、グレーの四角を赤い四角に変更しています。

class属性の削除

class属性を削除するときは、removeClass()命令を使用します。括弧内に削除したいclass属性値を書きます。複数のclass属性をスペース区切りで書けます。サンプルコードを実行すると、背景を黄色に設定した四角が黄色ではなく、グレーになっているのが確認できます。

実行結果はこちらです。

スポンサードリンク

関連記事

jQuery

Masonryのギャラリーの画像をクリックすると、画像が拡大し、キャプションがでるようにしてみる

前回の記事でMasonryのギャラリーを作成しましたが、今回はそれに、見出しをつけてみます。 サン

記事を読む

catejQuery

jQueryのセレクター1 odd/even/first/lastセレクター

CSSの箇所でselectorを取り上げましたが、 jQuery独自のセレクターがあるので 何回

記事を読む

jQuery

Masonryのギャラリーの画像にホバーしたときに動きを付けてみる

今回はMasonryのギャラリーの画像にマウスのカーソルを乗せたときに青い半透明のアニメーションがで

記事を読む

catejQuery

テキストの取得・変更

HTMLファイルに含まれるテキストをjQueryで 取得・変更するには、text()という命令を使

記事を読む

catejQuery

ボタンを回転させて表示する。

ブラウザの上部からぶら下がっているボタンです。スクロールが停止した後、一定時間おいて回転しながら現れ

記事を読む

jQuery

CSSプロパティの設定と値の取得

jQueryで、シンプルにCSSのプロパティの値を設定したり、取得したりできます。CSSを操作すると

記事を読む

catejQuery

親要素を取り除いたり、要素を削除する。

前回は要素を包む命令を取り上げました。 今回はその逆、親要素を取り除いたり、 要素を置き換えたり

記事を読む

jQuery

jQueryで表示・非表示サイドバーを作ってみる

今回の内容は、クリック操作によってWebページの左側に格納できるサイドバーを作成します。サンプルコー

記事を読む

catejQuery

透明度を少しづつ変更する fadeTo()

fadeTo()は、セレクターで指定した要素の 透明度(CSSのopacityプロパティ)を、設定

記事を読む

catejQuery

独自のアニメーションを指定する animate()

animate()命令は、任意のCSSプロパティの 値を徐々に変更して、独自のアニメーションを作成

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑