我想一次性动态地更改 otc 中任何类的样式。由于 CSS 样式来自 Web Api。 javascript 有办法做到这一点吗?
感谢愿意帮助的人
这是我的 HTML:
<accordion close-others="false">
<div>
<accordion-group class="div-recipe-header">
<accordion-heading></accordion-heading>
<my-directive></my-directive>
<div otc-dynamic>
<div class="div-recipe-name"></div>
<div class="div-recipe-cost"></div>
</div>
</accordion-group>
</div>
</accordion>
来自 Json 的示例数据(我将数据放在变量 usercss 中)
usercss = '.div-recipe-cost{position: absolute;top: 0;left: calc(100% - 85px);bottom: 0;overflow:padding-top: 5px;padding-bottom: 5px;padding-right: 0;font-family: 'Segoe UI', 'Open Sans', 'Roboto', 'Lucida Grande', 'Helvetica', 'Arial', 'sans-serif';font-size: small;background: none;overflow: hidden;font-weight: bold;} .div-recipe-name{position: absolute;top: 0;left: 12px;bottom: 0;width: calc(100% - 0px);padding-top: 5px;padding-bottom: 5px;padding-right: 0;height: calc(100% - 0px);font-family: 'Segoe UI', 'Open Sans', 'Roboto', 'Lucida Grande', 'Helvetica', 'Arial', 'sans-serif';font-size: large;background: none;overflow: hidden;} '
最佳答案
使用ng-class .这将允许您动态设置类。此外,您可以将三元运算与 ng 类结合使用,如 here 所示。 .
我假设您在加载到内存中的样式表中定义了类。
.white{
color: #ffffff;
}
.black{
color: #000000;
}
在你的 Angular Controller 中,你可以定义一个变量来保存你的类名。在这里,我将其设置为默认应用“白色”。
$scope.myClass = "white";
然后在您的标记中,您只需使用 ng-class 将该变量绑定(bind)到您的元素。
<div ng-class="myClass">....</div>
现在,只要 $scope.myclass 发生变化,相应的类就会添加到 div 中,而旧的类将被删除。因此,在您的 Controller 中,您将拥有可以触发更改的内容...
if( some_condition ){
$scope.myClass = "black";
} else {
$scope.myClass = "white";
}
关于javascript - 动态更改 CSS AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26795140/