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

最新推荐文章于 2024-11-27 12:08:42 发布

K'illCode

最新推荐文章于 2024-11-27 12:08:42 发布

阅读量2.9k

点赞数

分类专栏： angularJS 文章标签： angularJs

angularJS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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

 
       01<!doctype html>
 
       02<html lang="en">
 
       03<head>
 
       04    <meta charset="UTF-8" />
 
       05    <title>Document</title>
 
       06    <style type="text/css">
 
       07        .ng-cloak{display:none;}
 
       08    </style>
 
       09</head>
 
       10<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
 
       11    <input type="text" ng-model="color" />
 
       12    <input type="number" ng-model="num" />
 
       13    <p ng-style="{'color':color, 'fontSize':num+'px'}">赵一鸣技术博客</p>
 
       14</body>
 
       15</html>
 
       16<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
 
       17<script type="text/javascript">
 
       18    var m = angular.module('app', []);
 
       19    m.controller('ctrl', ['$scope', function($scope){
 
       20         
 
       21    }]);
 
       22</script>