我可以在内部 CSS 中使用 Angular js 变量吗？
Posted
技术标签:
【中文标题】我可以在内部 CSS 中使用 Angular js 变量吗？【英文标题】：Can I use angular js variable in internal CSS? 【发布时间】：2018-07-08 00:38:27 【问题描述】：我正在做一个 angularjs 项目，我需要在 CSS 中使用用户定义（动态）颜色，有没有办法使用 Angularjs、核心 JS 或 SASS 在我的 CSS 中使用这种动态颜色？
类似...
html 页面中的内部 CSS：
<style>
.button, .link
background: ColorTheme ;
</style>
AngularJS 控制器：
app.controller('myController', function($scope)
$scope.ColorTheme = '#f00';
);
【问题讨论】：
一种方法是使用 Sass 创建多个 css 主题文件，并根据用户需要更改引用。 是的，您可以，您应该将样式标签保留在同一控制器标记边界内。或者你也可以通过 ng-class 来实现。 @Prajwal，你能解释一下你的观点吗 【参考方案1】：您可以使用 angularjs 中的一个名为 ng-style 的工具。
这里是一个例子：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-style="myObj">Welcome</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope)
$scope.myObj =
"color" : "white",
"background-color" : "blue",
"font-size" : "60px",
"padding" : "50px"
);
</script>
</body>参考：https://www.w3schools.com/angular/ng_ng-style.asp
【讨论】：
感谢@Matheus，但我需要它用于多伙伴选择器（.button、.link、.menu、a），但我无法跟踪它们（我的意思是我没有 HTML访问） 在***上看一下这个主题的第一个答案***.com/questions/1720320/…你也可以使用 var myEl = angular.element( document.querySelector( 'div' ) ); myEl.addClass('yourClassNameCreate'); 不错，但也需要 HTML 访问权限才能添加 id(document.getElementById('someElementId')
我认为您可以使用 Jquery 轻松解决您的问题，但您只说（Angularjs、核心 JS 或 SASS）。对吗？
是的，我知道那种方式.. $(multipal selectors).style() 但如果我可以使用 Angularjs 或 SASS 来实现它会更好，谢谢。以上是关于我可以在内部 CSS 中使用 Angular js 变量吗？的主要内容，如果未能解决你的问题，请参考以下文章
Angular RXJS Observables或Subjects在内部传递数字
jQuery - 如何使用元素的 HTML 获取所有样式/css（在内部/外部文档中定义）
如何在 CSS 中记住边距在边框之外，而在内部填充 [关闭]