如何從 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>