深入了解 ng-style

一、ng-style用法

ng-style是AngularJS提供的一個指令，用於動態設置元素的樣式。該指令將一個對象作為屬性值，該對象的屬性名代表CSS屬性，屬性值代表CSS值。因此，我們可以通過改變該對象中屬性的值來動態地改變元素的樣式。

下面是一個簡單的示例，展示了ng-style指令的基本用法:

<div ng-style="{color: 'red', 'font-weight': 'bold'}">
  This text is styled!
</div>

上述代碼中，我們通過ng-style將一個對象作為屬性值，該對象中color屬性的值為 red， ‘font-weight’ 屬性的值為 bold。因此,div元素的文本將被設置為紅色，並且為粗體。

如果我們要在使用動態CSS的時候動態綁定數據，如何實現呢？

下面的示例展示了如何使用ng-style動態地改變元素的樣式。

<div ng-app ng-init="customStyle={'background-color':'yellow'}">
    <button ng-click="customStyle['background-color']='green' ">Change Color</button>
    <div style="padding: 10px" ng-style="customStyle">Hello, World!</div>
</div>

上述代碼中，我們首先使用ng-init定義了一個customStyle對象，該對象的background-color屬性值為“yellow”。接着，在頁面中定義了一個按鈕，點擊該按鈕將把customStyle對象的background-color屬性值改變為“green”，接着，該div元素的背景顏色也會動態地改變為“green”。

二、ng-style translation

ng-style中文翻譯是ng樣式指令。該指令的作用是為我們提供了動態設置元素樣式的功能。

三、ng-style品牌

ng-style是AngularJS框架中提供的一種樣式指令，該指令可以通過JavaScript操作來改變DOM元素的樣式，是非常實用的一種AngularJS指令。

四、ng-style 層次

ng-style可以與ng-class指令結合使用，我們可以通過ng-style和ng-class 的組合使用來動態地改變元素樣式及元素的屬性。如下面這個例子:

<div ng-app ng-init="isBold=false">
    <button ng-click="isBold=!isBold">Bold</button>
    <div ng-class="{red: isBold}" ng-style="{ fontWeight: isBold ? 'bold' : 'normal' }">
        Hello, World!
    </div>
</div>

上述代碼中，我們首先使用ng-init定義了一個isBold的布爾類型變量，然後，在頁面中定義了一個按鈕，點擊該按鈕我們將該isBold的true和false交替改變。然後使用ng-class動態地設置div元素的背景顏色為紅色，使用ng-style指令為該div元素動態地設置字體加粗或正常。

五、ng-style不生效

我們在使用ng-style的時候，有時候會遇到ng-style不生效的問題。那麼，這個問題通常是由以下原因引起的：

原因1：CSS權重

如果一個元素同時被多個樣式指令修改的話，那麼對於同一個元素，會存在CSS權重的問題。

例如，我們有一個樣式如下所示:

.strikethrough { text-decoration: line-through; }

如果我們同時使用了ng-class和ng-style對這個span元素進行了處理，如下面的代碼所示：

<span ng-class="{'strikethrough': strikeThrough}">
    <p ng-style="{'color':'red'}">{{ words }}</p>
</span>

那麼，如果ng-class和ng-style的樣式屬性都有padding-left:100px這個樣式，那麼頁面會顯示出padding-left:100px的樣式，但text-decoration:line-through的樣式並沒有起作用。

原因2：表達式寫錯了

使用ng-style動態地設置CSS屬性和CSS值時，如果表達式寫錯了，那麼樣式不會被應用到相應的元素上，從而導致ng-style不生效。

六、ng-style 加多重判斷

ng-style可以嵌套使用，我們可以在局部或全局的作用域中通過多重判斷的方式來動態地設置元素的樣式，如下面這個例子所示:

<div ng-app ng-init="color='red'; fontSize='10px';">
    <select ng-model="color">
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
    </select>
    <select ng-model="fontSize">
        <option value="10px">Small</option>
        <option value="14px">Medium</option>
        <option value="18px">Large</option>
    </select>
    <hr>
    <div ng-style="{'color': color, 'font-size': fontSize}">
        Ng-style working well!
    </div>
    <hr>
    <div ng-style="{'color': (color==='red')?('red'):((color==='blue')?('blue'):(color==='green'?'green':'black')), 'font-size': (fontSize==='10px')?('10px'):((fontSize==='14px')?('14px'):(fontSize==='18px'? '18px':'10px'))}">
        Multiple Conditional ng-style!
    </div>
</div>

上述代碼中，我們在div元素中使用了兩重判斷，通過問題1我們知道，CSS的權重問題可能會影響ng-style的實現，而將同一個屬性賦值多次可能會引發其他問題，因此我們可以在這裡使用多重判斷來防止這個問題。如上述代碼所示，我們通過多重判斷來動態地改變文本的大小和顏色。

七、ng-style style區別

ng-style 和 正常樣式（style）標籤的區別在於，ng-style可以通過變量動態地更改元素的樣式。而普通的CSS樣式則無法動態的改變元素的樣式屬性。

八、mjstyle

mjstyle 是實現動態改變CSS樣式的基於AngularJS的指令。它可以讓您在指令中動態地設置CSS屬性和CSS值，讓您的web應用程序擁有更加靈活的樣式設置能力。

九、ng style tai chi chuan

ng style tai chi chuan指的是將ng-style與太極拳結合，使用太極拳的理念來動態地設置元素的樣式。因為太極拳注重“以柔克剛“的原則，通過這個原則，我們可以通過ng-style來實現元素的漸變動態效果。一個簡單的示例如下：

<div ng-app="myApp" ng-controller="myCtrl" 
     ng-style="{background-color:favColor, height: size, width: size}">
  <p>選擇太極拳武器</p>
  <select ng-model="favColor">
    <option value="red">紅太極拳</option>
    <option value="blue">藍太極拳</option>
    <option value="green">綠太極拳</option>
  </select>
  <br><br>
  <p>選擇太極拳形"</p>
  <select ng-model="size">
    <option value="150px">大圓球</option>
    <option value="100px">中圓球</option>
    <option value="50px">小圓球</option>
  </select>
</div>

上述代碼中，我們定義了一個div元素，使用ng-style為該元素動態地設置背景顏色、高和寬。在div元素中我們使用了AngularJS的太極拳武器和太極拳形動態地改變了元素的樣式，使得元素有了從小到大，逐漸渲染的效果。