如何在原生AngularJS中添加/删除CSS类(不依赖于jQuery)

How do I add/remove a CSS class in native AngularJS (not relying on jQuery)?

本文关键字：CSS 依赖于 jQuery 删除 原生 AngularJS 添加      更新时间：2023-09-26

我想添加/删除CSS类就像jQuery的$('#element').addClass('new_class')和removeClass()。AngularJS是否提供了一个不需要jQuery或jQLite的本地解决方案?我们的主要开发人员说，出于性能原因，他将删除jQuery，所以我需要一个本地解决方案。

我相信下面的例子使用了jQLite，它也应该被删除。

angular.element('#element').addClass("new_class");

是否存在真正的本地选项?

注:我用过ngClass，但那似乎不适合我的需要，因为我需要从控制器控制它。我基本上是利用Animate.css库制作动画，因此在某些事件中，我需要添加/删除CSS类来触发动画。我不认为我可以用ngClass实现这个。

你只需要在指令"ng-class"中绑定一个变量，然后从控制器中修改它。下面是一个示例:

var app = angular.module("ap",[]);
app.controller("con",function($scope){
  $scope.class = "red";
  $scope.changeClass = function(){
    if ($scope.class === "red")
      $scope.class = "blue";
    else
      $scope.class = "red";
  };
});
.red{
  color:red;
}
.blue{
  color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ap" ng-controller="con">
  <div ng-class="class">{{class}}</div>
  <button ng-click="changeClass()">Change Class</button>    
</body>

这个网站将是你远离jQuery的一个很好的资源:http://youmightnotneedjquery.com

这是删除一个类的例子:

if (el.classList)
  el.classList.remove(className);
else
  el.className = el.className.replace(new RegExp('(^|''b)' + className.split(' ').join('|') + '(''b|$)', 'gi'), ' ');

那应该足够让你走了。

相关文章：