使用js改变css的聚合物方式

Question

我来自angular，反应背景开始使用聚合物。我有一个聚合物类，可以说myClass有这个模板。<div  id="[[x]]">这里 x 是属性 getter 中定义的属性。  static get properties() {    return {            x: {        type: Number,        value: 200      },}在这里，如果我使用 chrome 开发工具控制台动态设置 x 的值，就像myClass.x = '5'它工作正常并且输出一样。<div  id="5">其他html 属性也是如此   <div  width="[[x]]">   <div  height="[[x]]">但现在考虑一个案例场景，我想以与我对id、width、height所做的相同的方式动态地为我的保证金属性提供我如何在 Polymer 中做到这一点？div在angular我们可以做到这一点。<div [style.marginTop.px]="marginTop">让我知道你的想法以 polmer 方式 od 做事。

Answer 1

我明白了，可以通过做这样的事情来实现。

<div style$="margin:{{ x }}px;">

Answer 2

也可以使用 CSS 变量来实现：

:root {

    --custom-margin-top: 20px;

}

div {

    margin-top: var(--custom-margin-top);

}

通过 JS 你可以：

updateMarginTop(marginTop) {

    this.updateStyles({

        '--custom-margin-top': `{marginTop}px`

    });

}