通過自定義屬性動態更改元素樣式？

Question

例如，您可以通過更改--paper-tab-ink: var(--accent-color);來更改中的ink顏色。是否可以動態改變CSS自定義屬性的值，類似於如何切換一個類或改變JS中的樣式？

Answer 1

有不同的方法可以做到這一點，但一個簡單的答案是在改變你的類後使用Polymer.updateStyles（）方法。

例如，假設你的風格是：

<style> 
.yellow x-example { 
    --light-primary-color: #fdd85f; 
} 
.red x-example { 
    --light-primary-color: red; 
} 
</style> 

，你想使組件使用的樣式在.red類。您只需像在JavaScript中一樣添加它，然後確保也可以使用此功能在頁面上實際更新它。

<div class="yellow" onclick="this.className='red'; Polymer.updateStyles()"> 
    <x-example></x-example> 
</div> 

Answer 2

是的，首先獲取您的自定義元素的對象。然後獲取customStyle對象。爲該對象添加樣式。然後運行element.updateStyles（）;

 t.clickListener= function(e) { 
      var t = Polymer.dom(e).localTarget; //retarget if needed 
      t.customStyle['--the-color-etc'] = 'pink'; 
      t.updateStyles(); // mandatory for the CSS variables shim 
     }; 

見the docs