"style" バインディング

用途

style バインディングは関連付けられた DOM エレメントにスタイルを追加・削除します。 例えば、値がマイナスとなった項目をハイライトする場合や、 変化する数値に一致するように、グラフ上のバーの幅を設定するといった場合に便利です。

注: 直接的にスタイルを適用するのではなく、CSS クラスを設定したい場合は "css" バインディングを使います。

例

<div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
	損益情報
</div>
 
<script type="text/javascript">
	var viewModel = {
		currentProfit: ko.observable(150000) // 正の値であるため、まずは黒で表示される
	};
	viewModel.currentProfit(-50); // これでDIVの内容が赤く表示される
</script>

上記の例では、currentProfit の値がゼロを下回った時に、エレメントの style.color プロパティに red が設定され、ゼロ以上になれば black が設定されます。

パラメタ

• 主パラメタ

  スタイル名と同じ名前のプロパティをもつ JavaScript オブジェクトを渡します。 それぞれのプロパティには、対応するスタイルに適用したい値を指定します。

  一度に複数のスタイルを設定できます。

  <div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black',
  						 fontWeight: isSevere() ? 'bold' : '' }">...</div>

  パラメタが参照している値が Observable である場合、バインディングは値が変更される度にスタイルを更新します。 Observable でない場合、スタイルは一度だけ設定され、以降は更新されません。

  また、関数や任意の式をパラメタの値として使用することもできます。 Knockout はそれらの評価結果の値を、適用するスタイルの値の決定に使用します。

• 追加パラメタ

  なし

(注) JavaScript 変数名として無効な名前のスタイルを適用するには

font-weight や text-decoration などの JavaScript の識別子として (ハイフンを含むため) 無効な名前のスタイルを適用する場合、次のようにキャメルケースに変換して下さい。

• { font-weight: someValue } → { fontWeight: someValue }
• { text-decoration: someValue } → { textDecoration: someValue }

参照: a longer list of style names and their JavaScript equivalents

依存

Knockout コアライブラリ以外、なし。