您的位置：首页 > Web前端 > AngularJS

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

2018-02-12 18:04 465 查看
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>
注意：ng-style里边是json格式，与jquery定制css样式类似，比如字体大小应该是fontSize，而不是font-size.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航