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

问题描述：

我想让用户动态设置样式，但我也想要获取某些样式的值。例如，我想检查用户是否将H1元素的颜色设置为“橙色”。使用AngularJS动态设置样式时访问样式属性

我的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)" ...）
How do I get the styles as applied by CSS rules?

这些问题的答案组合可以解答您的问题。基本上，你需要（旧IE或element.currentStyle）使用getComputedStyle(element)得到计算风格（.style只给你的样式直接应用于元素），以及你回来的价值很可能无法在格式它在样式表中（但在某些浏览器中可能是，因此......很难看）。

备注：一个硬编码的id值是一个红旗。改为使用ref。

答

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

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

相关推荐