Home » AngularJS 入門教學

[AngularJS]AngularJS 入門教學 - ngStyle

[ 日期： | 瀏覽：16,569 | 迴響：搶沙發 ]
範例 1

一般在設計網頁時，常常使用 class 來幫元素套上指定的樣式，當然可以使用最原始的 style 方式來設定 CSS 內容。而 AngularJS 除了有提供有跟 class 用途一樣的 ng-class 宣告式語法(Directives Syntax)之外，也有另一個相對於 style 效果的 ng-style。

用法其實非常簡單，讓我們直接來看官方的範例：

檢視原始碼 HTML
1
2
3
4
5
6
7

<div class="well span4" style="margin-top:20px;" ng-init="myStyle={}">
	<input type="button" class="btn btn-primary" value="Set" ng-click="myStyle={color:'red'}">
	<input type="button" class="btn btn-warning" value="Clear" ng-click="myStyle={}">
	<br><br>
	<div ng-style="myStyle">男丁格爾's 脫殼玩</div>
	<pre >myStyle = {{ myStyle }}</pre >
</div>

pre 區塊只是為了把變數顯示出來而已，重點是放在 myStyle 物件身上，它的 key 就是我們的 CSS 屬性，而 value 就是屬性值囉。
ngstyle-0

一開始未點擊 Set 鈕前，因為 myStyle 是空物件，所以什麼也不會套上去。這可以從開發者工具中看到：
ngstyle-1

接著當按下 Set 鈕後：
ngstyle-2

畫面既然改變了，當下的網頁原始碼內容當然也跟著變囉：
ngstyle-3

不過要注意的是，雖然 CSS 屬性是物件的 key，但 JavaScript 是不允許 - 的存在，所以如果要設定像是 font-size 這種屬性的話，可以將 - 刪除並將後面的單字開頭變成大寫：

檢視原始碼 HTML
1

ng-click="myStyle={color:'red', fontSize:'24px'}"

或者是把 key 也用單引號或雙引號包裹起來：

檢視原始碼 HTML
1

ng-click="myStyle={color:'red', 'font-size':'24px'}"

所以筆者再整理一下以上兩種寫法：

檢視原始碼 HTML
1
2
3
4
5
6
7

<div class="well span4" style="margin-top:20px;" ng-init="myStyle={}">
	<input type="button" class="btn btn-primary" value="Set" ng-click="myStyle={color:'red',fontSize:'24px','background-color':'yellow'}">
	<input type="button" class="btn btn-warning" value="Clear" ng-click="myStyle={}">
	<br><br>
	<div ng-style="myStyle">男丁格爾's 脫殼玩</div>
	<pre >myStyle = {{ myStyle }}</pre >
</div>

二話不說馬上按：
ngstyle-4

雖然我們混合了不同的語法，但一樣會輸出成正確的 CSS 屬性：
ngstyle-5

好啦好啦！接下來就請各位把 myStyle 改成呼叫函式並回傳帶有 CSS 屬性的物件吧！

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

發表迴響