将CSS属性赋值给JavaScript中的变量[聚合物]

我有一个简单的问题，即将CSS属性的值赋给某些变量是Polymer应用程序中的JavaScript。将CSS属性赋值给JavaScript中的变量[聚合物]

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

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

我想改变这个宽度属性，并完全控制这个。所以我readed我可以做一些自定义的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）

我想咨询一下如何使这个约在聚合物的一些好的做法，如何做到这一点。

来源

2017-05-06 Maciej Wójcik

您是使用Polymer 1.x还是2.0？ –

@JordanRunning 2.0，但是如果你知道1.0的解决方案，请告诉我 –

您可以使用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，当然。

来源

2017-05-06 21:44:39

这个“第一”解决方案看起来不错。现在，我给你“有用的标记”，明天我将对此进行编码，然后我将标记为正确的答案。非常感谢您 - 我认为这个解决方案正是我所需要的。 –

将CSS属性赋值给JavaScript中的变量[聚合物]

回答

相关问题