我试图让用户动态设置样式，但我也想获取某些样式的值。例如，我想检查用户是否将 H1 元素的颜色设置为“橙色”。
我的 HTML
<body ng-controller="mainController">
<h1 id="myH1">Hello World!</h1>
<textarea ng-model="outputCss"></textarea>
<style media="screen" type="text/css">
{{outputCss}}
</style>
</body>
我的 Javascript，在 mainController 中
var myH1Style = document.getElementById('myH1').style;
$scope.$watch('outputCss', function(newValue, oldValue){
if (myH1Style.color == "orange"){
alert("Nice work!");
}
console.log(myH1Style.color);
});
示例用户输入
#myH1 {
color: orange;
}
h1 {
font-weight: 900;
}
问题是，永远无法满足 if 条件，并且控制台日志始终为空。如何读取使用此方法添加的 CSS 属性？
最佳答案
你的问题基本上是两个问题:
How do I compare colors? (遗憾的是，这里的答案是它很难看，你得到的值可能不是应用它的格式，所以你可能会得到
"orange"或"rgb(255 , 165, 0)"或"rgb(255,165,0)"或"rgba(255, 165, 0, 1)"...)
这些问题的答案组合可以回答您的问题。基本上，您需要使用 getComputedStyle(element)(或旧 IE 上的 element.currentStyle)来获取 computed 样式(。 style 只为您提供直接应用于元素的样式)，并且您返回的值很可能不是样式表中的格式(但在某些浏览器中可能是，因此……丑陋)。
旁注:硬编码的 id 值是一个危险信号。使用 ref相反。
关于javascript - 在使用 AngularJS 动态设置样式时访问样式属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45149564/