資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究AngularJS – ng-style 指令
AngularJS 中的ng-style 指令可以根據條件設定 HTML 元素的 CSS 樣式。如果條件評估為 True，則樣式將被應用。ng-style 指令內的表示式必須是一個物件。這是所有 HTML 元素都支援的功能。
語法
<element ng-style="expression">..content..</element>
示例——ngStyle 指令
在 Angular 專案目錄中建立一個檔案“ngStyle.html”，然後複製貼上以下程式碼段。
<!DOCTYPE html>
<html>
<head>
<title>ngStyle Directive</title>
<style>
span {
color: black;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script>
</head>
<body ng-app style="text-align: center;">
<h1 style="color: green;">
Welcome to Tutorials Point
</h1>
<h2>
AngularJS | ngStyle Directive
</h2>
<input type="button" value="set color" ng-click="myStyle={color:'red'}" />
<input type="button" value="set background" ng-click="myStyle={'background color':'yellow'}" />
<input type="button" value="clear" ng-click="myStyle={}" />
<br />
<br />
<span ng-style="myStyle">Welcome to Tutorials Point</span>
<pre>myStyle={{myStyle}}</pre>
</body>
</html>輸出
要執行以上程式碼，只需轉到你的檔案，然後像普通 HTML 檔案一樣執行它。你將在瀏覽器視窗上看到以下輸出。
更新於： 08-10-2021
736 次瀏覽
廣告