CSSプロパティをjQueryで動的に追加してみよう！

18/11/25 17:40:01 19/05/05 15:17:39

jQueryはHTMLのタグに対して使用するためJavaScriptよりもCSSに性質が近い面もあるのですが、なかでも特にCSS的な使い方ができるのがCSSメソッドです。このCSSメソッドを使用すれば、HTMLのタグに対してCSSのようにプロパティ操作ができます。

それでは具体的な方法を紹介していきます。

1 CSSメソッドによるスタイル追加、変更、取得
2 相対値による値設定
3 複数のCSSの設定と取得
4 CSSメソッドの第二引数に関数を設定する
5 その他CSSメソッドの使い方
6 案件量が豊富なアルマサーチ

CSSメソッドによるスタイル追加、変更、取得

最初にCSSメソッドを用いてスタイルを追加する方法を紹介します。さっそくですが、サンプルコードは以下のようになります。

<body>
<p>サンプル</p>
<script>
</script>
　　　$('p').css('color', '#f00');
</body>

上記のソースコードではpタグに対してCSSメソッドで色を赤に指定しています。続いて、変更のサンプルコードは以下です。

<body>
<p style="color: #00f">サンプル</p>
<script>
</script>
　　　$('p').css('color', '#f00');
</body>

追加と変更の書き方はまったく同じで、違いはもともと色が設定されているかどうかです。今回のサンプルコードではもともとpタグの色が青色になっているため、それが赤色に変更されました。次に、取得のサンプルコードです。

<body>
<div style="border:1px solid #f00">サンプル</div>
<script>
</script>
　　　var result = $('div').css('border');
　　　console.log( result );
</body>

上記のソースコードを実行すると、以下のようにコンソール出力されます。

1px solid rgb(255, 0, 0)

CSSメソッドをdivタグに対して使用し、引数にborderを設定しています。このように記述することで、divタグのborderのプロパティを取得できるようになっています。カラー情報はrgb表記になります。

red、green、blueの略なのでだいたいの色はわかるかと思いますが、16進数による表記との対応表はネットでもすぐに見つかるので、必要な場合は検索してみてください。CSSメソッドの基本的な使い方は以上のようになるので、非常にシンプルで簡単です。

相対値による値設定

CSSでプロパティを設定する際は基本的に絶対値で設定しますが、jQueryの場合相対値で設定することも可能です。方法は以下のサンプルコードのようになります。

<body>
<p style="font-size: 10px">サンプル</p>
<script>
　　　$('p').css('font-size', '+=10');
　　　var result = $('p').css('font-size');
　　　console.log( result );
</script>
</body>

上記のソースコードを実行すると、以下のようにコンソール出力されます。

20px

もともとのフォントサイズは10pxでしたが、CSSメソッドを使用してサイズを10プラスしています。その結果、フォントサイズは20pxとなりました。

複数のCSSの設定と取得

今までは単一の設定のみを行ってきましたが、一つのCSSメソッドで複数のプロパティを設定することが可能です。また同様に取得も一度に複数のプロパティ取得が可能です。それではサンプルコードを見てみましょう。

<body>
<p>サンプル</p>
<script>
　　　$('p').css({
　　　　　　'color':'#f00',
　　　　　　'font-size':'20px',
　　　　　　'font-weight':'bold'
　　　});
</script>
</body>

上記のソースコードはCSSメソッドを用いて色、サイズ、フォントの太さをいっぺんに設定しています。カンマ区切りにすればいくつでもプロパティを設定することができるので、簡単です。

また、複数のプロパティを取得する場合は配列を使用します。サンプルコードは以下になります。

<body>
<p style="width:100px;padding:50px;color:#f00;">
　　　サンプル
</p>
<script>
　　　var result = $('p').css(['width', 'padding', 'color']);
　　　console.log( result );
</script>
</body>

上記のソースコードを実行すると、以下のようにコンソール出力されます。

{width: “100px”, padding: “50px”, color: “rgb(255, 0, 0)”}

CSSメソッドの引数が配列になっており、プロパティの格納順に指定しています。

CSSメソッドの第二引数に関数を設定する

今までは第一引数にプロパティ、第二引数に直接値を記述していました。しかし、第二引数に関数を設定することも可能です。第二引数に関数を設定すれば、プロパティに対して複数の値を一度に取得することなどができます。サンプルコードで確認しましょう。

<body>
<p style="font-size:10px">サンプル１</p>
<p style="font-size:11px">サンプル２</p>
<p style="font-size:12px">サンプル３</p>
<script>
　　　$('p').css('font-size', function(index, value) {
　　　　　　var result= parseInt(value) + 10;
　　　　　　return result + 'px';
　　　})
</script>
</body>

上記のソースコードを実行すると、以下のようにコンソール出力されます。

<p style=”font-size:20px”>サンプル１</p>
<p style=”font-size:21px”>サンプル２</p>
<p style=”font-size:22px”>サンプル３</p>

フォントサイズが設定されたpタグが三つありますが、それぞれに対してpxを10プラスしています。CSSメソッドの第二引数にはfunction(index, value)を設定し、indexとvalueを取得します。

indexには三つあるpタグのインデックス番号が格納され、valueにはプロパティ値であるfont-sizeの値が入ります。そしてvalueをイント型に変換しつつ10pxプラスし、最終的に出力しました。

その他CSSメソッドの使い方

CSSメソッドはプロパティを取得や追加するだけでなく、特殊な設定を行うことも可能です。たとえば、displayによって要素の表示、非表示の設定ができます。以下のサンプルコードで確認します。

<body>
<p>サンプル</p>
<button>ボタン</button>
<script>
　　　$('button').click(function() {
　　　　　　var ptag = $('p');
　　　　　　var state = ptag.css('display');
　　　　　　if(state === 'block') {
　　　　　　　　　ptag.css('display', 'none');
　　　　　　}
　　　　　　else {
　　　　　　　　　ptag.css('display', 'block');
　　　　　　}
　　　})
</script>
</body>