3章　属性、CSS操作

CSS操作

先程見たクラス操作関数を使ってスタイルを変更することはできます。デザイナと連携が密にできる場合は、その方がいいでしょう。ただ、個別の要素にインライン方式でCSSを設定することもできます。それが、こちらの.css()になります。また、既に適用されているCSSの値を取得することもできます。

.css()

.css(name)

マッチした要素の最初の要素から指定したCSSの値を文字列で取得します。値は計算済みの値が取得されます。
具体例を見てみましょう。

<style>

#outside {

  font-size: 10px;

#inside {

  font-size: 2em;

</style>

<div id="outside">

  <div id="inside">

  </div>

</div>

var ret1 = $("#outside").css("font-size");

var ret2 = $("#inside").css("font-size");

var ret3 = $("#outside").css("width");  // おまけ

// 値を出力します。（Firebugなどで動作します）

console.log(ret1);

console.log(ret2);

console.log(ret3);

このようにすると、次の結果になります。

ret1は、ある意味そのままの10pxが取得されています。一方、ret2は、どうでしょうか？CSSで定義済みの2emではなく、20pxが取得されています。これは、2emのような（あまり役に立たない）データではなく、2emを現在の要素に適用した後の計算済みのデータが返ってきます。ret3のwidthは、どうでしょうか？#outsideには、特にwidthの指定はしていませんが、ブラウザで計算済みの値が返ってきました。ここでは、1134pxとなっていますが、ブラウザの横幅を変えればこの値も変わってきます。

なお、単位（px）付きでデータが取得されていることにも留意しておいて下さい。後に見る .width()や .height()では、単位が付きません。

.css(name, value)

CSS名（name）に値（value）を設定します。

<div id="zansho">残暑が厳しいざんしょ。</div>

$('#zansho').css('background-color', 'pink');

次の結果になります。

本来ブラウザごとに異なるopacityの設定も、opacityに0.0～1.0（1.0が全部表示）の値を設定するだけで済みます。（-moz-opacityやfilter: alphaは、不要）

また、Ver. 1.6より、相対値を指定することもできます。以下で、現在のpadding-leftの値に、更に15プラスします。

$('#name').css("padding-left", "+=15");

.css(map)

attr(map)の場合と同じく、まとめて設定することができます。

<div id="night">今宵も暑い夏の夜</div>

$('#night').css({

  'background-color': 'pink',

  'font-weight': 'bold',

  color: 'blue'

});