Html 如何在 AngularJS 中动态更改 CSS 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39446602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change a CSS property dynamically in AngularJS
提问by rashadb
Right now I have a background image URL hard-coded into CSS. I'd like to dynamically choose a background image using logic in AngularJS. Here is what I currently have:
现在我有一个硬编码到 CSS 中的背景图片 URL。我想使用 AngularJS 中的逻辑动态选择背景图像。这是我目前拥有的：
HTML
HTML
<div class="offer-detail-image-div"><div>
CSS
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;
}
As you can see, the background image in the CSS references a specific file location. I want to be able to programmatically determine the location of the image URL. I really don't know where to begin. I do not know JQuery. Thank you.
如您所见，CSS 中的背景图像引用了特定的文件位置。我希望能够以编程方式确定图像 URL 的位置。我真的不知道从哪里开始。我不知道 JQuery。谢谢你。
回答by Mohit Tanwani
You can use ng-style to dynamically change a CSS class property using AngularJS.
您可以使用 ng-style 使用 AngularJS 动态更改 CSS 类属性。
Hope this ng-style example will help you to understand the concept at least.
希望这个 ng 风格的例子至少能帮助你理解这个概念。
More information for ngStyle
有关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
编辑-1
You can change the background-image: URL by following way.
您可以通过以下方式更改 background-image: URL。
$scope.style = function(value) {
return { 'background-image': 'url(' + value+')' };
}
回答by Itsik Mauyhas
You can use ng-class: documation.
If you want to do it in your directivecheck directive- attr: attr.
您可以使用ng-class：文档。如果你想在你的directive支票中做到这一点 directive- attr: attr。
回答by sofend
You can use [ngStyle]directly. It's a map, so you can directly address one of its elements like so: [ngStyle.CSS_PROPERTY_NAME]
可以[ngStyle]直接使用。这是一张地图，因此您可以直接寻址其中一个元素，如下所示：[ngStyle.CSS_PROPERTY_NAME]
For example:
例如：
<div class="offer-detail-image-div"
[ngStyle.background-image]="'url(' + backgroundSrc + ')'">Hello World!</div>
Also, for serving assets, Angular has the bypassSecurityTrustStyleutility function that can come in handy when serving up assets dynamically.
此外，对于服务资产，Angular 具有bypassSecurityTrustStyle实用功能，可以在动态服务资产时派上用场。
回答by SAI TEJA BATHULA
enter the size in textbox you can see box changes height and width
在文本框中输入大小，您可以看到框的高度和宽度变化
<!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>