在使用 AngularJS 动态设置样式时访问样式属性答案

【问题标题】：Accessing a style property while using AngularJS to set styles dynamically在使用 AngularJS 动态设置样式时访问样式属性
【发布时间】：2017-07-18 01:13:03
【问题描述】：

我试图让用户动态设置样式，但我也想获取某些样式的值。例如，我想检查用户是否将 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 属性？

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

你的问题基本上是两个问题：

How do I compare colors?（可悲的是，这里的答案是它很难看，你返回的值可能不是它应用的格式，所以你可能会得到"orange"或"rgb(255, 165, 0)"或@ 987654326@或"rgba(255, 165, 0, 1)"...)
How do I get the styles as applied by CSS rules?

这些问题的答案组合回答了您的问题。基本上，您需要使用 getComputedStyle(element)（或旧 IE 上的 element.currentStyle）来获得 computed 样式（.style 只为您提供样式直接应用于元素），并且您返回的值很可能不是样式表中的格式（但在某些浏览器中可能是，因此......丑陋）。

旁注：硬编码的id 值是危险信号。请改用ref。

【讨论】：

【解决方案2】：

即使在告诉您以错误的方式比较颜色之前，首先document.getElementById('myH1').style; 将返回内联样式，而不是 CSS 规则应用的样式。并且您正在动态更改 CSS 规则并观察内联样式。

【讨论】：