js STUDIO

ngStyle

概要

ngStyleディレクティブは、条件付きでHTML要素にCSSスタイルを設定します。

使用方法 

<要素 ng-style="{expression}">
   ...
</要素>

<要素 class="ng-style: {expression};">
   ...
</要素>

引数

引数 説明
ngStyle

型：式

キー:CSSのスタイル名で、値:CSSキーに対応する値のオブエジェクトとして評価される式を指定します。

デモ 

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
  </head>
  <body>
    <input type="button" value="set" ng-click="myStyle={color:'red'}">
    <input type="button" value="clear" ng-click="myStyle={}">
    <br/>
    <span ng-style="myStyle">Sample Text</span>
    <pre>myStyle={{myStyle}}</pre>
  </body>
</html>

span {
  color: black;
}

it('should check ng-style', function() {
  expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)');
  element('.doc-example-live :button[value=set]').click();
  expect(element('.doc-example-live span').css('color')).toBe('rgb(255, 0, 0)');
  element('.doc-example-live :button[value=clear]').click();
  expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)');
});

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
  </head>
  <body>
    <input type="button" value="set" ng-click="myStyle={color:'red'}">
    <input type="button" value="clear" ng-click="myStyle={}">
    <br/>
    <span ng-style="myStyle">Sample Text</span>
    <pre>myStyle={{myStyle}}</pre>
  </body>
</html>

 Back to top

© 2017 Google
Licensed under the Creative Commons Attribution License 3.0.

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。