如何在 AngularJS 中动态更改 CSS 属性答案

【问题标题】：How to change a CSS property dynamically in AngularJS如何在 AngularJS 中动态更改 CSS 属性
【发布时间】：2017-01-19 16:07:58
【问题描述】：

现在我有一个硬编码到 CSS 中的背景图片 URL。我想使用 AngularJS 中的逻辑动态选择背景图像。这是我目前拥有的：

HTML

<div class="offer-detail-image-div"><div>

CSS

.offer-detail-image-div {
  position: relative;
  display: block;
  overflow: hidden;
  max-width: 800px;
  min-height: 450px;
  min-width: 700px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 25px;
  padding-left: 25px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-radius: 5px;
  background-image: url('/assets/images/118k2d049mjbql83.jpg');
  background-position: 0px 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

如您所见，CSS 中的背景图片引用了特定的文件位置。我希望能够以编程方式确定图像 URL 的位置。我真的不知道从哪里开始。我不知道jQuery。谢谢。

【问题讨论】：

你检查过docs.angularjs.org/api/ng/directive/ngStyle 吗？
@ Makarov Sergey 我看过 ngStyle 但我不清楚这是类还是修改了类的一部分，如果是，这些点是如何连接的。此外，我不确定 ngStyle 或 ngClass 是否实际上更好或它们有何不同。也许是答案中的一个例子？ :)

标签： html css angularjs ng-style

【解决方案1】：

您可以使用 ng-style 使用 AngularJS 动态更改 CSS 类属性。

希望这个 ng 风格的例子至少能帮助你理解这个概念。

ngStyle 的更多信息

var myApp = angular.module('myApp', []);
myApp.controller("myAppCtrl", ["$scope", function($scope) {
      $scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];
      $scope.style = function(value) {
          return { "background-color": value };
      }
}]);

ul{
  list-style-type: none;
  color: #fff;
}
li{
  padding: 10px;
  text-align: center;
}
.original{
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myAppCtrl">
  <div class="container">
    <div class="row">
      <div class="span12">
        <ul>
          <li ng-repeat="color in colors">
            <h4 class="original" ng-style="style(color)"> {{ color }}</h4>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>

Edit-1

您可以通过以下方式更改 background-image: URL。

$scope.style = function(value) {
   return { 'background-image': 'url(' + value+')' };
}

【讨论】：

@Loading.. 很好的例子。我现在要试一试，但我想我明白了。请给我几分钟时间来摆弄它。
@rashadb 你可以试试，你只需要改变背景图片而不是颜色。
我不知道如何在 JS 中正确实现 url 部分，因此我收到以下错误：ReferenceError: url is not defined
你能创建 jsfiddle 吗？
在函数中你可以这样做。 return { '背景图片': 'url(' + value+')' };

【解决方案2】：

您可以使用ng-class：documation。如果你想在directive 中执行此操作，请检查 directive - attr : attr。

【讨论】：

@Itsik Mauyhas，这看起来很有用，但就我而言，我不想以编程方式调用类；我只想以编程方式修改类中的单个项目，背景图像。我不清楚如何用 ng-class 做到这一点。
在这种情况下，请查看指令文档，动态添加和删除 attr。
我确实仔细研究了两者之间的区别，ngclass 是动态地为固定类提供服务，而 ng-style 是用于动态设置样式元素。我相信 ng-style 对我来说是正确的。谢谢。

【解决方案3】：

您可以直接使用[ngStyle]。这是一张地图，因此您可以直接处理其中的一个元素，如下所示：[ngStyle.CSS_PROPERTY_NAME]

例如：

<div class="offer-detail-image-div"
     [ngStyle.background-image]="'url(' + backgroundSrc + ')'">Hello World!</div>

此外，对于服务资产，Angular 具有bypassSecurityTrustStyle 实用功能，可以在动态服务资产时派上用场。

【讨论】：

【解决方案4】：

在文本框中输入大小，您可以看到框的高度和宽度发生变化

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<p>Change the value of the input field:</p>

<div ng-app="" >

<input  ng-model="myCol" type="textbox">

<div style="background-color:red; width:{{myCol}}px; height:{{myCol}}px;"> </div>


</div>


</body>
</html>

【讨论】：