Question

是否可以使用Angular动态更改类的CSS属性的值？我试图从数据库中检索它后动态地将颜色值传递给CSS，我正在寻找一个解决方案。

我一直试图看看我是否可以为此制作动画效果，但这并不是那么简单。

感谢任何帮助。

Answer 1

如果您动态更改类的CSS属性的值，请参考ng-class

使用ng-class

<ANY ng-class="expression"> ... </ANY>

您还可以执行以下操作，如果expression为真，则会添加课程＆＃39; class-a＆＃39;

只有一个班级：

<div ng-class="{ class-a: expression }"></div>

两个以上的课程：

<div ng-class="{ class-a: expressionA, class-b: expressionB, class-c: expressionC }"></div>

使用$scope

html：

<div class="{{classPro}}></div>

JS：

$scope.classPro = "className";

Answer 2

有多种选择，其中一种方法是使用ng-style。让我们说你的每个元素都有颜色。

<ul>
  <li ng-repeat="item in items" ng-style="{'color': item.color}"></li>    
</ul>

如果您希望将单一样式颜色应用于类的所有项目。

angular.element('.className').css('color','#DBCLOR');

Answer 3

看起来以下链接已回答您的问题。我想称之为javascript方式而不是角度方式

How to dynamically create CSS class in JavaScript and apply?

Answer 4

使用ng-style完成此操作

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  $scope.colors = ['red', 'blue', 'green'];
});

.item{
  padding:5px;
  width:100px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <div class="item" ng-repeat="color in colors" ng-style="{'background-color':color}">{{color}}</div>
</div>

Answer 5

如果您知道已在某处定义的类名（在样式表，html中），您可以再次创建样式并为该类赋予新值。新值将应用于具有此类的所有元素。尝试创建一个新的样式标记，并使用javascript为其创建属性和值。尝试将其添加到头部。如果这不起作用，请尝试将其附加到正文。

var style = document.createElement('style');
var newColor = '#efefef'; //fetched from AJAX or anywhere
style.type = 'text/css';
style.innerHTML = '.cssClass { color: '+ newColor +  '; }';
document.getElementsByTagName('head')[0].appendChild(style);

使用Angular更改类的CSS属性值

5 个答案: