使用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屬性？

來源

2017-07-17 h01001000

你提的問題基本上是兩個問題：

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。

來源

2017-07-17 16:52:40

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

來源

2017-07-17 16:55:02

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

回答

相關問題