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

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

CSSプロパティ

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

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

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">サンプル1</p>
<p style="font-size:11px">サンプル2</p>
<p style="font-size:12px">サンプル3</p>
<script>
    $('p').css('font-size', function(index, value) {
        var result= parseInt(value) + 10;
        return result + 'px';
    })
</script>
</body>

 

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

<p style=”font-size:20px”>サンプル1</p>
<p style=”font-size:21px”>サンプル2</p>
<p style=”font-size:22px”>サンプル3</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>

 

上記のコードは、ボタンをクリックするたびにpタグの要素を表示、非表示と切り替えるものです。

ちなみに、$(‘button’).click(function()もjQueryの代表的な機能になります。他にもCSSメソッドの使い方はいくつかありますが、これだけ把握しておけばまずは大丈夫かと思います。

基本的な使い方がわかっていれば後は調べればすぐにわかるので、必要に応じてリサーチすると良いでしょう。

案件量が豊富なアルマサーチ

アルマサーチ

最後に、アルマサーチのご紹介!

アルマサーチはフリーランス向けに案件をご紹介することに特化したエージェントサービスです。豊富な案件量から、安定して継続的な案件のご紹介を実現しており、口コミから登録エンジニアが急増中です。

アルマサーチが選ばれる理由

  1. 豊富な案件量。週3?4日の案件や在宅リモート案件も。
  2. 優秀なコンサルタント陣。
  3. 案件に参画後もしっかりサポート。

豊富な案件量

フリーランス向けに特化し、業界屈指の案件量を誇ります!週3?4日の案件や、在宅リモート案件もありますし、その他あらゆる希望をしっかりお伝えください。最適な案件のご紹介をさせていただきます。

優秀なコンサルタント陣

技術に疎く、開発の希望を伝えても響かないエージェント・・・嫌ですよね。アルマサーチにはそのような者は一切おりません!さらに独立にまつわる税金や保険関係に詳しいスタッフが徹底的にサポートさせていただきます。

案件に参画後もしっかりサポート

常駐先が決まった瞬間に、一度も連絡が取れなくなるエージェント・・・いますよね?アルマサーチでは、そのようなことは一切ありません!常に電話やメールは即対応しますし、月に1度のランチミーティングなどから現場の状況を細かくヒアリングし、就業環境改善に尽力いたします。

相談する

人気記事

編集部おすすめ記事

この記事を読んだ人はこんな記事を読んでいます

案件探しやフリーランスになるための相談する