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

时间:2017-07-17 16:45:57

标签: javascript html css angularjs

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

2 个答案:

答案 0 :(得分:1)

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

  1. How do I compare colors?(遗憾的是,这里的答案是丑陋的,你得到的价值可能不是它的应用格式,所以你可能会得到"orange"或{ {1}}或"rgb(255, 165, 0)""rgb(255,165,0)" ...)

  2. How do I get the styles as applied by CSS rules?

  3. 这些问题的答案组合可以回答您的问题。基本上,您需要使用"rgba(255, 165, 0, 1)"(或旧版IE上的getComputedStyle(element))来获取计算样式(element.currentStyle仅为您提供样式直接< / em>应用于元素),你得到的值可能不是样式表中的格式(但在某些浏览器中可能是,因此......很丑)。

    旁注:硬编码的.style值是一个红旗。请改用ref

答案 1 :(得分:0)

即使在告诉您正在以错误的方式比较颜色之前,首先{} {}将返回内联样式,而不是CSS规则应用的样式。并且您正在动态更改CSS规则并观察内联样式。