javascript - 将 CSS 属性分配给 JavaScript [Polymer] 中的变量

Question

我有一个关于将 CSS 属性的值分配给某些变量的简单问题是 Polymer 应用程序中的 JavaScript。

假设我有一个div，width:200px;。在某些 JavaScript 函数中，我想将宽度更改为 200px+10px。

我知道我可以用 div.style.top = '210px'; 的方式在 JS 中应用它，但这不是我需要的!

我想改变这个宽度属性，并且对此有完全的控制。所以我读到我可以制作一些自定义 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)

我想问的是如何制作这个以及 polymer 的一些良好做法，如何制作。

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 docs on custom properties 值得一读.虽然我不确定它们是否 100% 最新，但它们提供了一些有用的信息:Shady DOM。

根据您的用例和您的目标浏览器，另一种选择是 CSS calc() function :

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

当然，您可以使用 updateStyles 执行相同的操作。