使用AngularJS動態設置樣式時訪問樣式屬性

Question

我試圖讓用戶動態設置樣式，但是我也想獲取某些樣式的值。 例如，我要檢查用戶是否將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屬性？

Answer 1

您的問題基本上是兩個問題：

如何比較顏色？ （可悲的是，這里的答案很丑陋，您返回的值可能不是應用該值的格式，因此您可能會得到"orange"或"rgb(255, 165, 0)"或"rgb(255,165,0)"或"rgba(255, 165, 0, 1)" "rgb(255,165,0)" "rgba(255, 165, 0, 1)" ...）
如何獲得CSS規則應用的樣式？

這些問題的答案組合會回答您的問題。 基本上，您需要使用getComputedStyle(element) （或舊IE上的element.currentStyle ）來獲取計算出的樣式（ .style僅使您直接將樣式應用於元素），並且返回的值可能不在樣式表中的格式（但在某些瀏覽器中可能因此...難看）。

旁注：硬編碼的id值是一個紅色標記。 使用ref代替。

Answer 2

甚至在告訴您以錯誤的方式比較顏色之前，請首先document.getElementById('myH1').style; 將返回內聯樣式，而不是CSS規則應用的樣式。 並且您正在動態地更改CSS規則，並根據該規則觀察內聯樣式。

使用AngularJS動態設置樣式時訪問樣式屬性

問題描述

2 個解決方案

解決方案1
1 已采納

解決方案2
0 2017-07-17 16:55:02

使用AngularJS動態設置樣式時訪問樣式屬性

問題描述

2 個解決方案

解決方案1 1 已采納

解決方案2 0 2017-07-17 16:55:02

解決方案1
1 已采納

解決方案2
0 2017-07-17 16:55:02