Javascript 在Angular JS中动态应用CSS样式属性

这应该是一个简单的问题，但我似乎找不到解决办法

我有以下标记：

<div style="width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;"></div>

---

这根本不管用。我是否误解了ng风格的工作原理？有没有一种方法可以将

{{{data.backgroundCol}}

放入普通样式属性并让它插入值？

直接从

ngStyle

：

表达式，该表达式对键为CSS样式名称和 值是那些CSS键的对应值

所以你可以这样做：

<div ng-style="{'background-color': data.backgroundCol}"></div>

希望这有帮助

指令允许您在HTML元素上动态设置CSS样式

它向一个对象求值，该对象的键是CSS样式名称，值是这些CSS键的对应值。由于某些CSS样式名称不是对象的有效键，因此必须引用它们

ng style=“{color:myColor}”

您的代码将是：

<div ng-style="{'width':'20px', 'height':'20px', 'margin-top':'10px', 'border':'solid 1px black', 'background-color':'#ff0000'}"></div>

。挂起删除{
背景颜色：粉红色
}

名称：{{item.name}，{{item.title}
（将被删除）

如果颜色设置为“红色”，我将隐藏。

在一般说明中，您可以使用ng if和ng样式的组合，将条件更改与背景图像中的更改结合起来

<span ng-if="selectedItem==item.id"
      ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_active.png)',
                'background-size':'52px 57px',
                'padding-top':'70px',
                'background-repeat':'no-repeat',
                'background-position': 'center'}">
 </span>
 <span ng-if="selectedItem!=item.id"
       ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_deactivated.png)',
                'background-size':'52px 57px',
                'padding-top':'70px',
                'background-repeat':'no-repeat',
                'background-position': 'center'}">
 </span>

---

最简单的方法是为样式调用函数，并让函数返回正确的样式

<div style="{{functionThatReturnsStyle()}}"></div>

---

我想说的是，您应该将不会更改的样式放在常规的

样式

属性中，将条件/范围样式放在

ng样式

属性中。此外，不需要字符串键。对于连字符分隔的CSS键，请使用camelcase

<div ng-style="{backgroundColor: data.backgroundCol}" style="width:20px; height:20px; margin-top:10px; border:solid 1px black;"></div>

只需执行以下操作：

---

是的，我在文档中看到了这一点，但我看不到如何将其转换为多个规则，现在我可以看到这不是正常的css语法，而是对象语法。我想获得当前单击元素的原始背景色，而不是我悬停时的背景色。使用以下选项可以为我提供悬停背景颜色，而不是原始颜色：$event.currentTarget.currentStyle.backgroundColor；知道如何得到原始背景色吗？这篇文章应该是：我不建议，angular是关于在视图中保留样式细节的，我也不建议这样做，这只适用于少数浏览器，如chrome，但如果你看IE9+这将不起作用，事实上这在IE11中仍然不起作用，我从以前的项目中复制了一些代码，当它不起作用时，我感到困惑，因为以前的项目使用的是Chrome

<div ng-style="{'background-color': data.backgroundCol}"></div>

<span ng-if="selectedItem==item.id"
      ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_active.png)',
                'background-size':'52px 57px',
                'padding-top':'70px',
                'background-repeat':'no-repeat',
                'background-position': 'center'}">
 </span>
 <span ng-if="selectedItem!=item.id"
       ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_deactivated.png)',
                'background-size':'52px 57px',
                'padding-top':'70px',
                'background-repeat':'no-repeat',
                'background-position': 'center'}">
 </span>

<div style="{{functionThatReturnsStyle()}}"></div>

$scope.functionThatReturnsStyle = function() {
  var style1 = "width: 300px";
  var style2 = "width: 200px";
  if(condition1)
     return style1;
  if(condition2)
     return style2;
}

<div ng-style="{backgroundColor: data.backgroundCol}" style="width:20px; height:20px; margin-top:10px; border:solid 1px black;"></div>