Polymer 1.x：如何強制性地（使用JS）獲得自定義CSS屬性的值？

Question

在下面的示例中，我有一個父自定義元素，它調用了一個子自定義元素。 子級具有可在父級CSS中定義的p元素的可變color CSS屬性。

在子元素的JS中，我想讀取在--custom-color元素上選擇的--custom-color值。 在這種情況下，該值為yellow 。 換句話說，當運行getCustomColor()方法時，我希望控制台日志顯示為“您的自定義顏色為黃色”。

我應該在getCustomColor()方法中使用什么JavaScript來定義var yourColor ？

my-parent-element.html

 <style> my-child-element { --custom-color: yellow; } </style> <template> <my-child-element></my-child-element> </template> 

my-child-element.html

 <style> p { color: var(--custom-color); } </style> <script> getCustomColor: function() { var yourColor = // What goes here to obtain the correct value of 'yellow'? console.log('Your custom color is' + yourColor); } </script> 

僅供參考： 本文檔描述了自定義樣式API 。 但是我似乎找不到對我在此問題中所描述內容的引用。

Answer 1

您鏈接的文檔實際上提到了它...

您只需要檢查this.customStyle['--my-property-name'] ，它將具有該屬性的值

Answer 2

@BryanDowning的評論：

var s = document.querySelector('p');
var yourColor = window.getComputedStyle(s).getPropertyValue('color');
// Using Polymer syntax, the above line could be written as follows:
var yourColor = s.getComputedStyleValue('color');

那種作品。 它返回第一個p元素的color屬性的當前值。