將CSS屬性分配給JavaScript中的變量[聚合物]

Question

我有一個關於將CSS屬性值分配給某些變量的簡單問題，即Polymer應用程序中的JavaScript。

假設我有一個width:200px; div width:200px; 。 在某些JavaScript函數中，我想將寬度更改為200px+10px 。

我知道我可以通過div.style.top = '210px'; ，但這不是我所需要的！

我想更改此width屬性，並對此具有完全控制權。 所以我讀了我可以做一些自定義CSS變量來保存我的寬度：

:host {
     --my-width: 200px;
}
div{
     width: var(--my-width);
}

很好，因為現在有了一個CSS變量，並且可以將此屬性設置為幾個選擇器，元素。

問題是-如何在JS中獲取此變量並以這種方式進行更改（偽代碼） ：

--my-width = --my-width + 10px

我知道我可以用這個

this.updateStyles({
   '--my-width': '210px'
});

替換值，但我想編寫如下代碼：

this.updateStyles({
   '--my-width': '--my-width'.value + 10px
});

這樣我可以通過添加一些值（+ 10px）而不定義新的（= 210px）來更改此寬度

我問的是如何做到這一點，以及聚合物的一些良好實踐，以及如何做到這一點。

Answer 1

您可以使用window.getComputedStyle和getPropertyValue ：

const styles = window.getComputedStyle(this);
const myWidth = styles.getPropertyValue('--my-width');

const newWidth = `${parseFloat(myWidth) + 10}px`;
this.updateStyles({ '--my-width': newWidth });

值得閱讀有關自定義屬性的Polymer文檔 。 盡管我不確定它們是否是100％最新的，但是它們具有一些有用的信息，例如：Shady DOM。

根據您的用例和您要定位的瀏覽器，一個替代方法是CSS calc()函數 ：

div {
  width: calc(var(--my-width) + 10px);
}

當然，您可以對updateStyles進行相同操作。