angularjs怎样修改同级元素的css样式

 我来答
铿锵民工
2017-06-14 · TA获得超过521个赞
知道小有建树答主
回答量:163
采纳率:50%
帮助的人:102万
展开全部

一般常用的两种是ng-style跟ng-class

1、ng-style

ng-style 指令为 HTML 元素添加 style 属性。

ng-style 属性值必须是对象,表达式返回的也是对象。

对象由 CSS 属性和值组成,即 key=>value 对。

例如:

<body ng-app="myApp" ng-controller="myCtrl">

<h1 ng-style="myObj">菜鸟教程</h1>

<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {

$scope.myObj = {

"color" : "white",

"background-color" : "coral",

"font-size" : "60px",

"padding" : "50px"

}

});

</script>

</body>

2、ng-class

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。

ng-class 指令的值可以是字符串,对象,或一个数组。

如果是字符串,多个类名使用空格分隔。

如果是对象,需要使用 key-value 对,key 为你想要添加的类名,value 是一个布尔值。只有在 value 为 true 时类才会被添加。

如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。

例如:

<select ng-model="home">

<option value="sky">Sky</option>

<option value="tomato">Tomato</option>

</select>


<div ng-class="home">

<h1>Welcome Home!</h1>

<p>I like it!</p>

</div>

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式