如何从 Polymer 中的 JavaScript 访问自定义 CSS 属性？

Question

我正在使用 Polymer 并希望能够在 JavaScript 中获取自定义 CSS 属性的值。

我以为我可以使用this.customStyle["--my-style"]来做到这this.customStyle["--my-style"]但事实并非如此（结果是undefined ）。 你可以看到下面的元素：

<dom-module id="my-element">
  <template>
    </style>
    <div>Some Content</div>
  </template>

  <script>
    Polymer({
      is: "my-element",
      attached: function () {
        console.log(this.customStyles["--my-style"])
      }
    })
  </script>
</dom-module>

无论如何我可以从 JavaScript 中访问这个自定义样式 - 我可以设置值，只是不能检索它。

Answer 1

customStyles是一个空对象，您在更新属性时填充它。 如果您需要检索Polymer提供的另一个 api getComputedStyleValue 的任何值。

 <base href="https://polygit.org/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> <dom-module id='computed-style'> <template> <style> :host { --my-style: red; } .test { color: var(--my-style); } </style> <div class='test' on-tap='getStyle'>Hello</div> </template> </dom-module> <script> Polymer({ is: 'computed-style', getStyle: function() { console.log(this.getComputedStyleValue('--my-style')); } }) </script> <computed-style></computed-style>