13、AngularJS使用ng-style动态改变样式

阅读() @2018-10-29 18:16:09

AngularJS使用ng-style动态改变样式,代码如下:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		.ng-cloak{display:none;}
	</style>
</head>
<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
	<input type="text" ng-model="color" />
	<input type="number" ng-model="num" />
	<p ng-style="{'color':color, 'fontSize':num+'px'}">赵一鸣技术博客</p>
</body>
</html>
<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctrl', ['$scope', function($scope){
		
	}]);
</script>

注意:ng-style里边是json格式,与jquery定制css样式类似,比如字体大小应该是fontSize,而不是font-size.

微信二维码