jQuery逆引きリファレンス

jQuery逆引きリファレンス

要素のスタイルプロパティを変更するには?(css)

2014年11月27日

背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。

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

 要素のスタイルプロパティを変更するには、cssメソッドを利用します。例えば以下は、class="dotnet"である要素のテキスト色を赤(Red)に変更するコードです。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<ul id="list">
  <li class="dotnet">ASP.NET MVC 5実践プログラミング</li>
  <li>JavaScript逆引きレシピ jQuery対応</li>
  <li>Ruby on Rails 4アプリケーションプログラミング</li>
  <li>10日でおぼえるjQuery入門教室 第2版</li>
  <li class="dotnet">独習ASP.NET 第4版</li>
</ul>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function() {
  $('.dotnet').css('color', 'Red');
});
</script>
</body>
</html>
cssメソッドで要素のスタイルを変更するコード(css.html)
「class="dotnet"」である要素のテキストを赤色に

数値プロパティを相対値で指定する

 数値プロパティである場合には、例えば15pxのような絶対値を設定できる他、+=5-=5のような形式で「現在値に5加える/減らす」のような相対値の指定もできます。例えばフォントサイズを8px増やすならば、以下のように表せます。

JavaScript
$('.dotnet').css('font-size', '+=8');
相対値でプロパティ値を設定する例
フォントサイズを8px増やす

フォントサイズを8px増やす

複数のスタイルプロパティをまとめて設定する

 { プロパティ名: 値... }形式のハッシュを渡すことで、複数のスタイルプロパティをまとめて設定することもできます。

JavaScript
$('.dotnet').css({
  fontSize: '16pt',           // 1camelCase形式で指定
  'background-color': 'Lime'  // 2ハイフン形式で指定
});
ハッシュで複数のスタイルプロパティを設定するコード(css.html)
フォントサイズを16pt、背景色をライムに
フォントサイズを16pt、背景色をライムに

 ハッシュ形式では、プロパティ名はcamelCase形式(=単語の区切りは大文字)で表す点に注目です(1)。JavaScriptでは識別子にハイフン-を含めることはできないからです。もしもハイフン形式の名前を利用する場合には、2のようにプロパティ名をクォート'でくくってください。

スタイルプロパティの現在値を取得する

 cssメソッドでは、スタイルプロパティを設定するだけではありません。以下のようにプロパティ名を文字列/配列で指定することで、現在値を取得することもできます*1

  • *1 プロパティ名を配列で指定できるのは、jQuery 1.9以降のみです。
JavaScript
console.log($('.dotnet').css('font-size'));
  // 結果:21px

console.log($('.dotnet').css([ 'font-size', 'background-color' ]));
  // 結果: {font-size: "21px", background-color: "rgb(0, 255, 0)"}
スタイルプロパティの現在値を取得するコード

 $()関数が複数の要素にマッチした場合にも、cssメソッドが取得するのは「最初の要素についてだけ」である点に注意してください。

処理対象:スタイルプロパティの取得/設定 カテゴリ:CSS|要素
API:.css() カテゴリ:CSS|Manipulation(要素の操作) > Style Properties(スタイルプロパティ)

※以下では、本稿の前後を合わせて5回分(第3回~第7回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

3. 以前のバージョンで開発したアプリを最新のjQueryで動作させるには?

基本的に旧バージョンのjQueryで作成したページは最新版でも動作するが、jQuery 1.9以前から最新化する場合には動作しない場合がある。その問題を回避できるjQuery Migrateプラグインの基本的な使い方を説明する。

4. 要素配下のテキストを取得/設定するには?(text/html)

textメソッドやhtmlメソッドを使って要素配下のテキストやHTMLソースを取得する方法を解説。それぞれの使い分けについても説明する。

5. 【現在、表示中】≫ 要素のスタイルプロパティを変更するには?(css)

背景色を変えるなど、要素のスタイルを変更できるcssメソッドの基本的な使い方を解説。相対値の指定や複数まとめて指定、現在の値の取得なども説明する。

6. 要素にスタイルクラスを適用/除外するには?(addClass/removeClass/toggleClass/hasClass)

要素にclass属性の値を設定/削除する方法を解説。また、その設定状態を切り替えたり、確認したりする方法も説明する。

7. 要素の属性を操作するには?(attr/removeAttr)

任意の要素の、任意の属性に対して値を設定/取得する方法を解説。また、複数の属性をまとめて設定する方法も説明する。

GrapeCity Garage 記事内容の紹介

Azure Central の記事内容の紹介

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社