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