使用js改变css的Polymer方式

Question

我来自angular，react背景开始使用polymer .

我有一个聚合物 class 让我们说 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]]">

但现在考虑一个案例场景，我想以与 margin 属性 动态地给我的 div =34=]id, width, height 我如何在 Polymer 中实现？

在angular中我们可以做到这一点。

<div [style.marginTop.px]="marginTop">

让我知道你做事的方式。

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`
    });
}

Polymer way of changing css using js