jQuery でcss を操作する(デモあり)

jQuery で css の値を操作するには css() メソッドを使います。

追加、変更は

削除(スタイルシートの値に戻す)は

取得は

- 目次 -

スポンサーリンク

追加、変更、削除

デモ

ボタンを押すと、background-color または width の値が追加・変更・削除されます。

色 :
幅 :

ソース

ポイントを抜粋

background-color、width を追加・変更・削除する部分の抜粋です。

width の場合、スタイルシートに値が指定してあります。その値を ③ で書きかえ、④ でもとに戻しています。

取得

デモ

ボタンを押すと、width または height の値を取得し、10px 加算してセットします。

ソース

ポイントを抜粋

width を取得し、10px 加算してセットする箇所です。

① で所得した w には、末尾に ‘px’ がついています。② のparseIntを通すことで ‘px’ が除去されます。

複数まとめて

複数のプロパティをまとめて取得、変更します。

デモ

ボタンを押すと、width と height の値をまとめて取得し、10px 加算してセットします。

ソース

ポイントを抜粋

width と height をまとめて取得し、10px 加算してセットする箇所です。

① の取得結果はオブジェクトで、以下のようにセットされています。

したがって、obj.width obj.heightの形式で値にアクセスできます。

スポンサーリンク

コメントはお気軽に