使用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&nbsp;style$="margin:{{&nbsp;x&nbsp;}}px;">

Answer 2

也可以使用 CSS 变量来实现：:root {&nbsp; &nbsp; --custom-margin-top: 20px;}div {&nbsp; &nbsp; margin-top: var(--custom-margin-top);}通过 JS 你可以：updateMarginTop(marginTop) {&nbsp; &nbsp; this.updateStyles({&nbsp; &nbsp; &nbsp; &nbsp; '--custom-margin-top': `{marginTop}px`&nbsp; &nbsp; });}